app.css in lookbook-0.5.0.beta.0

- old
+ new

@@ -1,9 +1,10 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import "tippy.js/dist/tippy";
+@import "tippy.js/dist/border";
 @import "code_theme";
 @import "tooltip_theme";
 
 @layer base {
   html {
@@ -55,12 +56,12 @@
     @apply bg-gray-400;
   }
 }
 
 @layer components {
-  #nav > ul > li {
-    @apply py-1;
+  #nav > ul > li > div {
+    @apply py-1 border-b border-gray-300;
   }
 
   .nav-toggle {
     @apply flex items-center cursor-pointer pr-3 hover:bg-gray-200 hover:bg-opacity-50;
   }
@@ -73,49 +74,56 @@
     @apply font-mono;
   }
 
   .code pre {
     @apply block;
+    /* @apply whitespace-pre-wrap; */
   }
 
   .code .line {
-    @apply flex items-center leading-relaxed;
+    @apply leading-relaxed;
   }
 
   .code.numbered {
     @apply relative pt-3;
   }
 
   .code.numbered:before {
     content: "";
-    left: calc(2.7em + 8px);
+    left: 2.7em;
     @apply absolute top-0 bottom-0 border-r border-gray-200;
   }
 
+  .code.numbered .line {
+    padding-left: calc(2.7em + 8px);
+    @apply relative;
+  }
+
   .code .line-number {
+    display: inline-block;
     width: calc(2.7em + 8px);
     padding-top: 3px;
     padding-bottom: 3px;
     padding-right: 8px;
     margin-right: 16px;
-    @apply font-mono text-right text-gray-400 flex-none text-xs;
+    @apply font-mono text-right text-gray-400 flex-none text-xs absolute left-0;
   }
 
   .code .line-content {
     @apply flex-none pr-4;
   }
 
-  /* .code .line:before {
-    content: counter(line);
-    width: calc(3em + 8px);
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-right: 8px;
-    @apply font-mono inline-block text-right mr-4 text-gray-400 border-r border-gray-200;
-  } */
+  .resize-handle {
+    @apply flex items-center justify-center h-full w-full border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 text-gray-400 hover:text-gray-700 transition select-none touch-none;
+  }
 }
 
 @layer utilities {
   .form-input {
     @apply border-gray-300 text-gray-700 focus:ring-indigo-300 focus:border-indigo-300 rounded-sm text-sm w-full;
+  }
+
+  .checked-bg {
+    background-color: #ffffff;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
   }
 }