fix: fix callout styles / margin

cratebind · Jan 6, 2022 · c4d92c6 · c4d92c6
1 parent a64aad4
commit c4d92c6
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 18 deletions.
diff --git a/docs/components/callout.tsx b/docs/components/callout.tsx
@@ -2,9 +2,9 @@
 
 const Callout = ({ children, background = 'bg-orange-100', emoji = '💡' }) => {
   return (
-    <p className={`${background} flex rounded-lg`}>
+    <p className={`${background} flex rounded-lg items-center callout`}>
       <span className="pl-3 pr-2 py-2 select-none text-xl">{emoji}</span>
-      <span className="pr-4 py-2">{children}</span>
+      <span className="pr-4 py-2 mt-0">{children}</span>
       {/* <style jsx>{`
         span > :global(p) {
           margin-top: 0;

diff --git a/docs/global.css b/docs/global.css
@@ -1,4 +1,5 @@
-[data-name="live-editor"] textarea, [data-name="live-editor"] pre {
+[data-name='live-editor'] textarea,
+[data-name='live-editor'] pre {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   padding-left: 0 !important;
@@ -13,19 +14,23 @@ content pre {
   position: relative;
 }
 
-input[type=color]{
-	width: 40px;
-	height: 40px;
-	border: none;
-	border-radius: 40px;
+input[type='color'] {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 40px;
   background: none;
   cursor: pointer;
 }
-input[type="color"]::-webkit-color-swatch-wrapper {
+input[type='color']::-webkit-color-swatch-wrapper {
   padding: 0;
   border: 0;
 }
-input[type="color"]::-webkit-color-swatch {
+input[type='color']::-webkit-color-swatch {
   border-radius: 40px;
   border: 0;
-}
+}
+
+.callout p {
+  margin: 0;
+}
diff --git a/docs/pages/components/Menu.mdx b/docs/pages/components/Menu.mdx
@@ -9,8 +9,8 @@ Built on top of the [Reach UI Menu Button](https://reacttraining.com/reach-ui/me
 When you need to trigger actions from a dropdown (such as when clicking in the menu of a desktop application).
 
 <Callout emoji="⚠️">
-  Do _not_ use this if you need to store a value. Use a `<select />` component
-  instead.
+  {' '}
+  Do _not_ use this if you need to store a value. Use a `<select />` component instead.
 </Callout>
 
 ```js

diff --git a/docs/theme/styles.css b/docs/theme/styles.css
@@ -1,9 +1,13 @@
 @tailwind base;
 
 @import url('https://rsms.me/inter/inter.css');
-html { font-family: 'Inter', sans-serif; }
+html {
+  font-family: 'Inter', sans-serif;
+}
 @supports (font-variation-settings: normal) {
-  html { font-family: 'Inter var', sans-serif; }
+  html {
+    font-family: 'Inter var', sans-serif;
+  }
 }
 
 html {
@@ -86,18 +90,21 @@ figure figcaption {
 .sidebar ul ul {
   @apply ml-5;
 }
-.sidebar a:focus-visible, .sidebar button:focus-visible {
+.sidebar a:focus-visible,
+.sidebar button:focus-visible {
   @apply shadow-outline;
 }
 .sidebar li.active > a {
   @apply font-semibold text-black bg-gray-200;
 }
-.sidebar button, .sidebar a {
+.sidebar button,
+.sidebar a {
   @apply block w-full text-left text-base text-black no-underline text-gray-600 mt-1 p-2 rounded select-none outline-none;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
 }
-.sidebar a:hover, .sidebar button:hover {
+.sidebar a:hover,
+.sidebar button:hover {
   @apply text-gray-900 bg-gray-100;
 }