Fix indentation

mui · Sep 5, 2023 · c494e33 · c494e33
1 parent 9313e05
commit c494e33
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 143 deletions.
diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx
@@ -106,26 +106,28 @@ const StyledMenuItem = styled(MenuItem)(
 
 const TriggerButton = styled(MenuButton)(
   ({ theme }) => `
-font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+    font-family: IBM Plex Sans, sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background-color: ${blue[500]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    transition: all 150ms ease;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0px 4px 30px ${
+      theme.palette.mode === 'dark' ? grey[900] : grey[100]
+    };
 
-  &:hover {
-    background-color: ${blue[600]};
-  }
+    &:hover {
+      background-color: ${blue[600]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
-    outline: none;
-  }
+    &:focus-visible {
+      box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+      outline: none;
+    }
   `,
 );
diff --git a/docs/data/base/components/menu/MenuSimple/css/index.tsx b/docs/data/base/components/menu/MenuSimple/css/index.tsx
@@ -5,7 +5,7 @@ import { MenuButton } from '@mui/base/MenuButton';
 import { Dropdown } from '@mui/base/Dropdown';
 import { useTheme } from '@mui/system';
 
-export default function MenuIntroduction() {
+export default function MenuSimple() {
   const createHandleMenuClick = (menuItem: string) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
@@ -14,28 +14,28 @@ export default function MenuIntroduction() {
 
   return (
     <Dropdown>
-      <MenuButton className="TriggerButtonIntroduction">My account</MenuButton>
+      <MenuButton className="TriggerButtonSimple">My account</MenuButton>
 
       <Menu
-        className="CustomMenuIntroduction"
+        className="CustomMenuSimple"
         slotProps={{
-          listbox: { className: 'CustomMenuIntroduction--listbox' },
+          listbox: { className: 'CustomMenuSimple--listbox' },
         }}
       >
         <MenuItem
-          className="CustomMenuIntroduction--item"
+          className="CustomMenuSimple--item"
           onClick={createHandleMenuClick('Profile')}
         >
           Profile
         </MenuItem>
         <MenuItem
-          className="CustomMenuIntroduction--item"
+          className="CustomMenuSimple--item"
           onClick={createHandleMenuClick('Language settings')}
         >
           Language settings
         </MenuItem>
         <MenuItem
-          className="CustomMenuIntroduction--item"
+          className="CustomMenuSimple--item"
           onClick={createHandleMenuClick('Log out')}
         >
           Log out
@@ -83,7 +83,7 @@ function Styles() {
 
   return (
     <style>{`
-    .CustomMenuIntroduction--listbox {
+    .CustomMenuSimple--listbox {
       font-family: IBM Plex Sans, sans-serif;
       font-size: 0.875rem;
       box-sizing: border-box;
@@ -101,34 +101,34 @@ function Styles() {
       };
     }
 
-    .CustomMenuIntroduction--item {
+    .CustomMenuSimple--item {
       list-style: none;
       padding: 8px;
       border-radius: 8px;
       cursor: default;
       user-select: none;
     }
 
-    .CustomMenuIntroduction--item:last-of-type {
+    .CustomMenuSimple--item:last-of-type {
       border-bottom: none;
     }
 
-    .CustomMenuIntroduction--item.${menuItemClasses.focusVisible} {
+    .CustomMenuSimple--item.${menuItemClasses.focusVisible} {
       outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]};
       background-color: ${isDarkMode ? grey[800] : grey[100]};
       color: ${isDarkMode ? grey[300] : grey[900]};
     }
 
-    .CustomMenuIntroduction--item.${menuItemClasses.disabled} {
+    .CustomMenuSimple--item.${menuItemClasses.disabled} {
       color: ${isDarkMode ? grey[700] : grey[400]};
     }
 
-    .CustomMenuIntroduction--item:hover:not(.${menuItemClasses.disabled}) {
+    .CustomMenuSimple--item:hover:not(.${menuItemClasses.disabled}) {
       background-color: ${isDarkMode ? cyan[800] : cyan[50]};
       color: ${isDarkMode ? grey[300] : grey[900]};
     }
 
-    .TriggerButtonIntroduction {
+    .TriggerButtonSimple {
       font-family: IBM Plex Sans,sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
@@ -151,7 +151,7 @@ function Styles() {
     }
 
 
-    .CustomMenuIntroduction {
+    .CustomMenuSimple {
       z-index: 1;
     }
     `}</style>

diff --git a/docs/data/base/components/menu/MenuSimple/system/index.tsx b/docs/data/base/components/menu/MenuSimple/system/index.tsx
@@ -108,7 +108,7 @@ const StyledMenuItem = styled(MenuItem)(
 
 const TriggerButton = styled(MenuButton)(
   ({ theme }) => `
-font-family: IBM Plex Sans, sans-serif;
+  font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;

diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx b/docs/data/base/components/modal/KeepMountedModal.tsx
@@ -89,25 +89,25 @@ const style = (theme: Theme) => ({
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  border: none;
+    font-family: IBM Plex Sans, sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background-color: ${blue[500]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    transition: all 150ms ease;
+    cursor: pointer;
+    border: none;
 
-  &:hover {
-    background-color: ${blue[600]};
-  }
+    &:hover {
+      background-color: ${blue[600]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
-    outline: none;
-  }
+    &:focus-visible {
+      box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+      outline: none;
+    }
   `,
 );
diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx b/docs/data/base/components/modal/ModalUnstyled.tsx
@@ -82,25 +82,25 @@ const style = (theme: Theme) => ({
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  border: none;
+    font-family: IBM Plex Sans, sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background-color: ${blue[500]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    transition: all 150ms ease;
+    cursor: pointer;
+    border: none;
 
-  &:hover {
-    background-color: ${blue[600]};
-  }
+    &:hover {
+      background-color: ${blue[600]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
-    outline: none;
-  }
+    &:focus-visible {
+      box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+      outline: none;
+    }
   `,
 );
diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
@@ -123,25 +123,25 @@ const style = (theme: Theme) => ({
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
-font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  border: none;
+    font-family: IBM Plex Sans, sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background-color: ${blue[500]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    transition: all 150ms ease;
+    cursor: pointer;
+    border: none;
 
-  &:hover {
-    background-color: ${blue[600]};
-  }
+    &:hover {
+      background-color: ${blue[600]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
-    outline: none;
-  }
+    &:focus-visible {
+      box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+      outline: none;
+    }
   `,
 );
diff --git a/docs/data/base/components/modal/SpringModal.tsx b/docs/data/base/components/modal/SpringModal.tsx
@@ -114,25 +114,25 @@ const style = (theme: Theme) => ({
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
-font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  border: none;
+    font-family: IBM Plex Sans, sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background-color: ${blue[500]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    transition: all 150ms ease;
+    cursor: pointer;
+    border: none;
 
-  &:hover {
-    background-color: ${blue[600]};
-  }
+    &:hover {
+      background-color: ${blue[600]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
-    outline: none;
-  }
+    &:focus-visible {
+      box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+      outline: none;
+    }
   `,
 );
diff --git a/docs/data/base/components/modal/TransitionsModal.tsx b/docs/data/base/components/modal/TransitionsModal.tsx
@@ -87,25 +87,25 @@ const style = (theme: Theme) => ({
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
-font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  border: none;
+    font-family: IBM Plex Sans, sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background-color: ${blue[500]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    transition: all 150ms ease;
+    cursor: pointer;
+    border: none;
 
-  &:hover {
-    background-color: ${blue[600]};
-  }
+    &:hover {
+      background-color: ${blue[600]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
-    outline: none;
-  }
+    &:focus-visible {
+      box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+      outline: none;
+    }
   `,
 );