Merge pull request #16 from appleple/fix/support-cms-7417

CMS-7417 の変更に合わせてスタイルをリファクタリング

Author: uidev1116

bin/develop/develop.yaml

@@ -39,10 +39,10 @@
     "themes/**develop**/**/*.{css,js,jsx,ts,tsx,twig}": [
       "npm --prefix themes/develop run format"
     ],
-    "themes/**develop**/**/*.{js,jsx,ts,tsx,vue,svelte}": [
+    "themes/**develop**/src/js/**/*.{js,jsx,ts,tsx,vue,svelte}": [
       "npm --prefix themes/develop run eslint"
     ],
-    "themes/**develop**/**/*.{css,scss,sass,less,styl,vue,svelte}": [
+    "themes/**develop**/src/style/**/*.{css,scss,sass,less,styl,vue,svelte}": [
       "npm --prefix themes/develop run stylelint"
     ]
   }

package.json

@@ -3,7 +3,7 @@
 <!-- END unit#custom_unit_space -->
 
 <!-- BEGIN unit#custom_outline -->
-<details class="p-4 rounded-md bg-gray-50 [&:not(:has(li))]:hidden [&[open]_span.label-open]:hidden [&:not([open])_span.label-close]:hidden [&_svg]:open:-rotate-180 mt-(--unit-margin-top) mb-(--unit-margin-bottom)" open>
+<details class="p-4 rounded-md bg-gray-50 [&:not(:has(li))]:hidden [&[open]_span.label-open]:hidden [&:not([open])_span.label-close]:hidden [&_svg]:open:-rotate-180 mb-[2em]" open>
   <summary class="flex items-center gap-x-4">
     <p class="not-prose font-bold">目次</p>
     <p class="not-prose text-indigo-600 cursor-pointer">

themes/develop/include/unit/extend.html

@@ -5,12 +5,10 @@
 }
 
 :root {
-  --unit-margin-top: 0;
-  --unit-margin-bottom: 1.5em;
   --unit-gap-x: 1em;
 
-  @media (width >= 520px) {
-    --unit-margin-bottom: 2em;
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media (width >= theme(breakpoint.sm)) {
     --unit-gap-x: 2em;
   }
 }

themes/develop/src/style/_theme.css

@@ -6,6 +6,7 @@
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
 @import './_theme.css';
-@import './editor/index.css';
 
 @plugin "@tailwindcss/typography";
+
+@config '../../tailwind.config.js';