public/lookbook-assets/css/lookbook.css in lookbook-2.0.0.beta.3 vs public/lookbook-assets/css/lookbook.css in lookbook-2.0.0.beta.4
- old
+ new
@@ -1466,20 +1466,89 @@
[data-component="icon"] svg {
height: 100%;
width: 100%;
fill: #0000;
stroke: currentColor;
- stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.lookbook-panel {
min-height: 100%;
padding: 1rem;
}
+[data-component="message"] {
+ width: 100%;
+ border-width: 1px;
+ border-color: var(--lookbook-divider);
+ background-color: var(--lookbook-message-bg);
+ --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ border-radius: .25rem;
+ gap: 1.5rem;
+ padding: 1rem;
+ display: flex;
+}
+
+@media (min-width: 480px) {
+ [data-component="message"] {
+ padding: 1.5rem;
+ }
+}
+
+[data-component="message"].icon-right {
+ flex-direction: row-reverse;
+ align-items: center;
+}
+
+[data-component="message"].icon-left {
+ align-items: flex-start;
+}
+
+[data-component="message"] .message-title {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-transform: uppercase;
+ letter-spacing: .025em;
+ color: var(--lookbook-message-title);
+ margin-bottom: .5rem;
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.5rem;
+ overflow: hidden;
+}
+
+[data-component="message"] .message-icon {
+ opacity: .3;
+ flex: none;
+ display: none;
+}
+
+@media (min-width: 480px) {
+ [data-component="message"] .message-icon {
+ display: block;
+ }
+}
+
+[data-component="message"].theme-error {
+ --tw-border-opacity: 1;
+ border-color: rgb(254 202 202 / var(--tw-border-opacity));
+}
+
+[data-component="message"].theme-error .message-title {
+ --tw-text-opacity: 1;
+ color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
+[data-component="message"].theme-error .message-icon {
+ --tw-text-opacity: 1;
+ color: rgb(220 38 38 / var(--tw-text-opacity));
+ opacity: .5;
+}
+
[data-component="nav"] .nav-action {
width: 100%;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
@@ -1518,11 +1587,11 @@
[data-component="params-editor"] table:not(.linear) thead th {
text-align: left;
vertical-align: middle;
padding: 1rem;
- font-weight: 700;
+ font-weight: 600;
}
[data-component="params-editor"] table:not(.linear) thead th.param-label {
width: 18%;
}
@@ -1540,11 +1609,11 @@
vertical-align: middle;
padding: 1rem;
}
[data-component="params-editor"] table:not(.linear) tbody td.param-label {
- font-weight: 700;
+ font-weight: 600;
}
[data-component="params-editor"] table:not(.linear) tbody .param-input-wrapper {
min-height: 38px;
}
@@ -1578,28 +1647,36 @@
padding-left: 1rem;
padding-right: 1rem;
}
[data-component="params-editor"] table.linear td.param-label {
- font-weight: 700;
+ font-weight: 600;
}
[data-component="params-editor"] table.linear td.param-description-empty {
display: none;
}
+[data-component="prose"] {
+ letter-spacing: -.015em !important;
+}
+
[data-component="prose"] [data-component="code"] {
border-width: 1px;
border-color: var(--lookbook-divider);
border-radius: .375rem;
}
-[data-component="prose"] [data-component="embed"], [data-component="prose"] [data-component="code"] {
+[data-component="prose"] [data-component="embed"], [data-component="prose"] [data-component="code"], [data-component="prose"] [data-lookbook-embed] {
margin-top: 2rem;
margin-bottom: 2rem;
}
+[data-component="prose"] [data-lookbook-embed] {
+ border-radius: .375rem;
+}
+
[data-component="tabs-dropdown-tab"]:not(.hidden) {
border-bottom-width: 1px;
border-bottom-color: var(--lookbook-divider);
}
@@ -1783,14 +1860,10 @@
.relative {
position: relative;
}
-.sticky {
- position: sticky;
-}
-
.-inset-px {
inset: -1px;
}
.inset-0 {
@@ -1905,10 +1978,14 @@
.mb-6 {
margin-bottom: 1.5rem;
}
+.mb-7 {
+ margin-bottom: 1.75rem;
+}
+
.mb-8 {
margin-bottom: 2rem;
}
.mb-\[-2px\] {
@@ -1953,18 +2030,10 @@
.mt-12 {
margin-top: 3rem;
}
-.mt-2 {
- margin-top: .5rem;
-}
-
-.mt-3 {
- margin-top: .75rem;
-}
-
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
@@ -2065,10 +2134,14 @@
.min-h-0 {
min-height: 0;
}
+.min-h-\[50vh\] {
+ min-height: 50vh;
+}
+
.w-11 {
width: 2.75rem;
}
.w-3 {
@@ -2085,14 +2158,10 @@
.w-5 {
width: 1.25rem;
}
-.w-\[140px\] {
- width: 140px;
-}
-
.w-\[320px\] {
width: 320px;
}
.w-\[9px\] {
@@ -2125,22 +2194,22 @@
.max-w-screen-lg {
max-width: 1024px;
}
-.max-w-sm {
- max-width: 24rem;
-}
-
.flex-none {
flex: none;
}
.flex-shrink-0 {
flex-shrink: 0;
}
+.flex-grow {
+ flex-grow: 1;
+}
+
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1\/2 {
@@ -2627,12 +2696,12 @@
.pb-3 {
padding-bottom: .75rem;
}
-.pb-4 {
- padding-bottom: 1rem;
+.pb-6 {
+ padding-bottom: 1.5rem;
}
.pl-0 {
padding-left: 0;
}
@@ -2756,14 +2825,10 @@
.leading-tight {
line-height: 1.25;
}
-.tracking-wide {
- letter-spacing: .025em;
-}
-
.tracking-wider {
letter-spacing: .05em;
}
.\!text-lookbook-header-text {
@@ -2792,14 +2857,10 @@
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
-.text-lookbook-blank-slate-title {
- color: var(--lookbook-blank-slate-title);
-}
-
.text-lookbook-branding-text {
color: var(--lookbook-branding-text);
}
.text-lookbook-button-text {
@@ -2836,15 +2897,10 @@
.text-lookbook-tabs-text-hover {
color: var(--lookbook-tabs-text-hover);
}
-.text-red-300 {
- --tw-text-opacity: 1;
- color: rgb(252 165 165 / var(--tw-text-opacity));
-}
-
.text-red-700 {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity));
}
@@ -2966,10 +3022,14 @@
.ease-in-out {
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
+.bg-checked {
+ 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");
+}
+
.tippy-box[data-animation="fade"][data-state="hidden"] {
opacity: 0;
}
[data-tippy-root] {
@@ -3335,20 +3395,19 @@
font-style: italic;
}
.theme-github .highlight .err {
color: var(--hl-error-fg);
- background-color: var(--hl-error-bg);
}
.theme-github .highlight .g {
color: var(--hl-subtle-fg);
}
.theme-github .highlight .k {
color: var(--hl-keyword);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .l {
color: var(--hl-subtle-fg);
}
@@ -3357,11 +3416,11 @@
color: var(--hl-keyword);
}
.theme-github .highlight .o {
color: var(--hl-operator);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .x {
color: var(--hl-subtle-fg);
}
@@ -3375,11 +3434,11 @@
font-style: italic;
}
.theme-github .highlight .cp {
color: var(--hl-comment-preproc);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .c1 {
color: var(--hl-comment);
font-style: italic;
@@ -3387,11 +3446,11 @@
.theme-github .highlight .cs {
color: var(--hl-comment-special-fg);
background-color: var(--hl-comment-special-bg);
font-style: italic;
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .gd {
color: var(--hl-deleted-fg);
background-color: var(--hl-deleted-bg);
@@ -3423,30 +3482,30 @@
color: var(--hl-prompt);
}
.theme-github .highlight .gs {
color: var(--hl-subtle-fg);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .gu {
color: var(--hl-subheading);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .gt {
color: var(--hl-danger);
}
.theme-github .highlight .kc, .theme-github .highlight .kd, .theme-github .highlight .kn, .theme-github .highlight .kp, .theme-github .highlight .kr {
color: var(--hl-keyword-crude);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .kt {
color: var(--hl-keyword-subtle);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .ld {
color: var(--hl-subtle-fg);
}
@@ -3467,11 +3526,11 @@
color: var(--hl-builtin);
}
.theme-github .highlight .nc {
color: var(--hl-class);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .no {
color: var(--hl-variable);
}
@@ -3484,16 +3543,16 @@
color: var(--hl-entity);
}
.theme-github .highlight .ne {
color: var(--hl-exception);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .nf {
color: var(--hl-function);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .nl {
color: var(--hl-subtle-fg);
}
@@ -3514,11 +3573,11 @@
color: var(--hl-variable);
}
.theme-github .highlight .ow {
color: var(--hl-word);
- font-weight: bold;
+ font-weight: 600;
}
.theme-github .highlight .w {
color: var(--hl-whitespace);
}
@@ -3566,10 +3625,220 @@
.theme-github .highlight .line-number::selection {
background-color: #0000;
}
+@media (min-width: 1024px) {
+ .lg\:prose-base {
+ font-size: 1rem;
+ line-height: 1.75;
+ }
+
+ .lg\:prose-base :where(p):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+ }
+
+ .lg\:prose-base :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.2em;
+ margin-bottom: 1.2em;
+ font-size: 1.25em;
+ line-height: 1.6;
+ }
+
+ .lg\:prose-base :where(blockquote):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.6em;
+ margin-bottom: 1.6em;
+ padding-left: 1em;
+ }
+
+ .lg\:prose-base :where(h1):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+ margin-bottom: .888889em;
+ font-size: 2.25em;
+ line-height: 1.11111;
+ }
+
+ .lg\:prose-base :where(h2):not(:where([class~="not-prose"] *)) {
+ margin-top: 2em;
+ margin-bottom: 1em;
+ font-size: 1.5em;
+ line-height: 1.33333;
+ }
+
+ .lg\:prose-base :where(h3):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.6em;
+ margin-bottom: .6em;
+ font-size: 1.25em;
+ line-height: 1.6;
+ }
+
+ .lg\:prose-base :where(h4):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.5em;
+ margin-bottom: .5em;
+ line-height: 1.5;
+ }
+
+ .lg\:prose-base :where(img):not(:where([class~="not-prose"] *)) {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+
+ .lg\:prose-base :where(video):not(:where([class~="not-prose"] *)) {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+
+ .lg\:prose-base :where(figure):not(:where([class~="not-prose"] *)) {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+
+ .lg\:prose-base :where(figure > *):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .lg\:prose-base :where(figcaption):not(:where([class~="not-prose"] *)) {
+ margin-top: .857143em;
+ font-size: .875em;
+ line-height: 1.42857;
+ }
+
+ .lg\:prose-base :where(code):not(:where([class~="not-prose"] *)) {
+ font-size: .875em;
+ }
+
+ .lg\:prose-base :where(h2 code):not(:where([class~="not-prose"] *)) {
+ font-size: .875em;
+ }
+
+ .lg\:prose-base :where(h3 code):not(:where([class~="not-prose"] *)) {
+ font-size: .9em;
+ }
+
+ .lg\:prose-base :where(pre):not(:where([class~="not-prose"] *)) {
+ border-radius: .375rem;
+ margin-top: 1.71429em;
+ margin-bottom: 1.71429em;
+ padding: .857143em 1.14286em;
+ font-size: .875em;
+ line-height: 1.71429;
+ }
+
+ .lg\:prose-base :where(ol):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+ padding-left: 1.625em;
+ }
+
+ .lg\:prose-base :where(ul):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+ padding-left: 1.625em;
+ }
+
+ .lg\:prose-base :where(li):not(:where([class~="not-prose"] *)) {
+ margin-top: .5em;
+ margin-bottom: .5em;
+ }
+
+ .lg\:prose-base :where(ol > li):not(:where([class~="not-prose"] *)) {
+ padding-left: .375em;
+ }
+
+ .lg\:prose-base :where(ul > li):not(:where([class~="not-prose"] *)) {
+ padding-left: .375em;
+ }
+
+ .lg\:prose-base :where(.lg\:prose-base > ul > li p):not(:where([class~="not-prose"] *)) {
+ margin-top: .75em;
+ margin-bottom: .75em;
+ }
+
+ .lg\:prose-base :where(.lg\:prose-base > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ }
+
+ .lg\:prose-base :where(.lg\:prose-base > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 1.25em;
+ }
+
+ .lg\:prose-base :where(.lg\:prose-base > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ }
+
+ .lg\:prose-base :where(.lg\:prose-base > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 1.25em;
+ }
+
+ .lg\:prose-base :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+ margin-top: .75em;
+ margin-bottom: .75em;
+ }
+
+ .lg\:prose-base :where(hr):not(:where([class~="not-prose"] *)) {
+ margin-top: 3em;
+ margin-bottom: 3em;
+ }
+
+ .lg\:prose-base :where(hr + *):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+
+ .lg\:prose-base :where(h2 + *):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+
+ .lg\:prose-base :where(h3 + *):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+
+ .lg\:prose-base :where(h4 + *):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+
+ .lg\:prose-base :where(table):not(:where([class~="not-prose"] *)) {
+ font-size: .875em;
+ line-height: 1.71429;
+ }
+
+ .lg\:prose-base :where(thead th):not(:where([class~="not-prose"] *)) {
+ padding-bottom: .571429em;
+ padding-left: .571429em;
+ padding-right: .571429em;
+ }
+
+ .lg\:prose-base :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+ padding-left: 0;
+ }
+
+ .lg\:prose-base :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+ padding-right: 0;
+ }
+
+ .lg\:prose-base :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+ padding: .571429em;
+ }
+
+ .lg\:prose-base :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
+ padding-left: 0;
+ }
+
+ .lg\:prose-base :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
+ padding-right: 0;
+ }
+
+ .lg\:prose-base :where(.lg\:prose-base > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+
+ .lg\:prose-base :where(.lg\:prose-base > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 0;
+ }
+}
+
.hover\:bg-lookbook-button-bg-hover:hover {
background-color: var(--lookbook-button-bg-hover);
}
.hover\:bg-lookbook-draggable-hint:hover {
@@ -3626,21 +3895,73 @@
.focus-visible\:outline-none:focus-visible {
outline-offset: 2px;
outline: 2px solid #0000;
}
+.prose-headings\:font-semibold :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *)) {
+ font-weight: 600;
+}
+
+.prose-h1\:font-bold :where(h1):not(:where([class~="not-prose"] *)) {
+ font-weight: 700;
+}
+
.prose-a\:text-lookbook-prose-link :where(a):not(:where([class~="not-prose"] *)) {
color: var(--lookbook-prose-link);
}
+@media (min-width: 480px) {
+ .xs\:mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .xs\:w-auto {
+ width: auto;
+ }
+
+ .xs\:min-w-\[440px\] {
+ min-width: 440px;
+ }
+
+ .xs\:max-w-\[680px\] {
+ max-width: 680px;
+ }
+
+ .xs\:py-8 {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+}
+
+@media (min-width: 640px) {
+ .sm\:p-8 {
+ padding: 2rem;
+ }
+}
+
@media (min-width: 768px) {
+ .md\:p-12 {
+ padding: 3rem;
+ }
+
.md\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.md\:pt-10 {
padding-top: 2.5rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .lg\:mb-9 {
+ margin-bottom: 2.25rem;
+ }
+
+ .lg\:pb-8 {
+ padding-bottom: 2rem;
}
}
/*# sourceMappingURL=lookbook.css.map */