[TASK] styleguide: Namespace BE css

TYPO3-CMS/styleguide#464 Have a unique BE css id to restrict any declared CSS to the styleguide module.
TYPO3 · Oct 31, 2023 · 2402823 · 2402823
1 parent 26e8e8b
commit 2402823
Show file tree

Hide file tree

Showing 20 changed files with 62 additions and 98 deletions.
diff --git a/typo3/sysext/styleguide/Classes/Controller/BackendController.php b/typo3/sysext/styleguide/Classes/Controller/BackendController.php
@@ -91,7 +91,7 @@ public function handleRequest(ServerRequestInterface $request): ResponseInterfac
         if (!in_array($currentAction, $this->allowedActions, true)
             && !in_array($currentAction, $this->allowedAjaxActions, true)
         ) {
-            throw new \RuntimeException('Not allowed action', 1672751508);
+            throw new \RuntimeException('Action not allowed', 1672751508);
         }
         $actionMethodName = $currentAction . 'Action';
         return $this->$actionMethodName($request);
@@ -304,7 +304,7 @@ private function flashMessagesAction(ServerRequestInterface $request): ResponseI
         $loremIpsum = GeneralUtility::makeInstance(KauderwelschService::class)->getLoremIpsum();
         // We're writing to an own queue here to position the messages within the body.
         // Normal modules wouldn't usually do this and would let ModuleTemplate layout take care of rendering
-        // at some appropriate positions.
+        // at some appropriate position.
         $flashMessageQueue = $this->flashMessageService->getMessageQueueByIdentifier('styleguide.demo');
         $flashMessageQueue->enqueue(GeneralUtility::makeInstance(FlashMessage::class, $loremIpsum, 'Info - Title for Info message', ContextualFeedbackSeverity::INFO, true));
         $flashMessageQueue->enqueue(GeneralUtility::makeInstance(FlashMessage::class, $loremIpsum, 'Notice - Title for Notice message', ContextualFeedbackSeverity::NOTICE, true));

diff --git a/typo3/sysext/styleguide/Resources/Private/Styles/backend.scss b/typo3/sysext/styleguide/Resources/Private/Styles/backend.scss
@@ -1,21 +1,14 @@
 // Navigation scaffold
-@media (min-width: 769px) {
-    #container-navigation {
-        position: fixed;
-        width: 260px;
-    }
-    #container-content {
-        margin-left: 300px;
-    }
-    @media (max-height: 660px) {
-        #container-navigation {
-            position: absolute;
-        }
-    }
+#tx-styleguide-navigation {
+    position: fixed;
+    width: 260px;
+}
+#tx-styleguide-content {
+    margin-left: 300px;
 }
 
-// Example
-.example {
+// Code and example rendering
+#tx-styleguide-content .example {
     background-color: var(--typo3-component-bg);
     border: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
     padding: var(--typo3-spacing);
@@ -31,20 +24,10 @@
         margin-bottom: var(--typo3-spacing);
     }
     &.code {
-        font-family: var(--typo3-font-family-code);
         &:before {
             content: 'EXAMPLE CODE';
         }
     }
-    pre {
-        font-size: var(--typo3-component-font-size);
-        margin: 0;
-    }
-    pre[class*="language-"] {
-        border-radius: calc(var(--typo3-component-border-radius) / 2);
-        color: var(--typo3-component-color);
-        margin: 0;
-    }
     pre code {
         overflow: auto;
         width: 100%;
@@ -53,15 +36,13 @@
 }
 
 // Icon module
-div.icon-container {
+#tx-styleguide-content .icon-container {
     border: 1px solid transparent;
     margin-bottom: 20px;
     height: 100px;
-
     &.icon-deprecated-container {
         height: 175px;
     }
-
     span.icon-container-icon,
     span.icon-container-label {
         display: block;

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Accordion.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Accordion.html
@@ -8,10 +8,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
 
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:accordion"/></h1>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Avatar.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Avatar.html
@@ -9,10 +9,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
 
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:avatar" /></h1>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Buttons.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Buttons.html
@@ -9,10 +9,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:buttons" /></h1>
 
         <!--

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Cards.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Cards.html
@@ -8,10 +8,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:cards" /></h1>
 
         <p>Cards can be displayed individually or in groups.</p>

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Colors.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Colors.html
@@ -8,10 +8,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:colors" /></h1>
         <p>CI color from the TYPO3 logo and contrast primary color.</p>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Filter.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Filter.html
@@ -9,10 +9,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
 
         <h1>Filter</h1>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/FlashMessages.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/FlashMessages.html
@@ -8,11 +8,11 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
 
-    <div id="container-content">
+    <div id="tx-styleguide-content">
         <h1>
             <f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:flashMessages"/>
         </h1>

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Icons.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Icons.html
@@ -9,10 +9,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
 
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:icons" /></h1>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Index.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Index.html
@@ -8,10 +8,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:backendStyleguide" /></h1>
         <p>Presents supported styles for TYPO3 backend modules.</p>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Infobox.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Infobox.html
@@ -7,10 +7,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
 
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:infobox" /></h1>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Modal.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Modal.html
@@ -8,10 +8,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
 
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:modal" /></h1>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Notifications.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Notifications.html
@@ -8,10 +8,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="""vigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
 
         <h1>
             <f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:notifications"/>

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Pagination.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Pagination.html
@@ -9,10 +9,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
 
         <h1>Pagination</h1>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Tab.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Tab.html
@@ -14,10 +14,10 @@
         }"
     />
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
 
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:tab" /></h1>
 

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Tables.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Tables.html
@@ -8,10 +8,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:tables" /></h1>
 
         <!--

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Trees.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Trees.html
@@ -16,10 +16,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:trees" /></h1>
 
         <h2>Page trees</h2>

diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Typography.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Typography.html
@@ -8,10 +8,10 @@
 
 <f:section name="Content">
 
-    <div id="container-navigation">
+    <div id="tx-styleguide-navigation">
         <f:render partial="Backend/Navigation" arguments="{currentAction: currentAction, actions: actions}" />
     </div>
-    <div id="container-content">
+    <div id="tx-styleguide-content">
         <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:typography" /></h1>
 
         <!--

diff --git a/typo3/sysext/styleguide/Resources/Public/Css/backend.css b/typo3/sysext/styleguide/Resources/Public/Css/backend.css
@@ -1,70 +1,53 @@
-@media (min-width: 769px) {
-  #container-navigation {
-    position: fixed;
-    width: 260px;
-  }
-  #container-content {
-    margin-left: 300px;
-  }
+#tx-styleguide-navigation {
+  position: fixed;
+  width: 260px;
 }
-@media (min-width: 769px) and (max-height: 660px) {
-  #container-navigation {
-    position: absolute;
-  }
+
+#tx-styleguide-content {
+  margin-left: 300px;
 }
-.example {
+
+#tx-styleguide-content .example {
   background-color: var(--typo3-component-bg);
   border: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
   padding: var(--typo3-spacing);
   margin-bottom: var(--typo3-spacing);
 }
-.example + *:not(.example) {
+#tx-styleguide-content .example + *:not(.example) {
   margin-top: var(--typo3-component-spacing);
 }
-.example:before {
+#tx-styleguide-content .example:before {
   content: "EXAMPLE";
   display: block;
   font-weight: normal;
   font-size: 0.9em;
   margin-bottom: var(--typo3-spacing);
 }
-.example.code {
-  font-family: var(--typo3-font-family-code);
-}
-.example.code:before {
+#tx-styleguide-content .example.code:before {
   content: "EXAMPLE CODE";
 }
-.example pre {
-  font-size: var(--typo3-component-font-size);
-  margin: 0;
-}
-.example pre[class*=language-] {
-  border-radius: calc(var(--typo3-component-border-radius) / 2);
-  color: var(--typo3-component-color);
-  margin: 0;
-}
-.example pre code {
+#tx-styleguide-content .example pre code {
   overflow: auto;
   width: 100%;
   display: block;
 }
 
-div.icon-container {
+#tx-styleguide-content .icon-container {
   border: 1px solid transparent;
   margin-bottom: 20px;
   height: 100px;
 }
-div.icon-container.icon-deprecated-container {
+#tx-styleguide-content .icon-container.icon-deprecated-container {
   height: 175px;
 }
-div.icon-container span.icon-container-icon,
-div.icon-container span.icon-container-label {
+#tx-styleguide-content .icon-container span.icon-container-icon,
+#tx-styleguide-content .icon-container span.icon-container-label {
   display: block;
   text-align: center;
   background-color: #eee;
   min-height: 50px;
   padding: 5px;
 }
-div.icon-container:hover span.icon-container-icon, div.icon-container:hover span.icon-container-label {
+#tx-styleguide-content .icon-container:hover span.icon-container-icon, #tx-styleguide-content .icon-container:hover span.icon-container-label {
   background-color: #e1e1e1;
 }