mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-09-07 21:44:36 +08:00
Simplify CSS selectors (#2891)
This commit is contained in:
Jonatan Kłosko
GitHub
parent
d924a9a65d
commit
8ac4be0d23
7 changed files with 360 additions and 372 deletions
|
|
@ -3,6 +3,8 @@ const esbuild = require("esbuild");
|
||||||
const stylePlugin = require("esbuild-style-plugin");
|
const stylePlugin = require("esbuild-style-plugin");
|
||||||
const postcssImport = require("postcss-import");
|
const postcssImport = require("postcss-import");
|
||||||
const tailwind = require("tailwindcss");
|
const tailwind = require("tailwindcss");
|
||||||
|
const tailwindNesting = require("tailwindcss/nesting");
|
||||||
|
const postcssNesting = require("postcss-nesting");
|
||||||
const autoprefixer = require("autoprefixer");
|
const autoprefixer = require("autoprefixer");
|
||||||
|
|
||||||
const args = process.argv.slice(2);
|
const args = process.argv.slice(2);
|
||||||
|
|
@ -27,7 +29,13 @@ async function main() {
|
||||||
plugins: [
|
plugins: [
|
||||||
stylePlugin({
|
stylePlugin({
|
||||||
postcss: {
|
postcss: {
|
||||||
plugins: [postcssImport, tailwind, autoprefixer],
|
plugins: [
|
||||||
|
postcssImport,
|
||||||
|
// See https://tailwindcss.com/docs/using-with-preprocessors#nesting
|
||||||
|
tailwindNesting(postcssNesting),
|
||||||
|
tailwind,
|
||||||
|
autoprefixer,
|
||||||
|
],
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -1,450 +1,338 @@
|
||||||
/*
|
/*
|
||||||
Conditional elements display.
|
Conditional elements display.
|
||||||
|
|
||||||
Verious hooks and callbacks dynamically set attributes
|
Verious hooks and callbacks dynamically set attributes based on which
|
||||||
based on which we hide/show certain elements.
|
we hide/show certain elements. This way we don't have to engage the
|
||||||
This way we don't have to engage the server in
|
server in solely client-side operations.
|
||||||
solely client-side operations.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* === Global === */
|
/* Hooks */
|
||||||
|
|
||||||
[phx-hook="Highlight"][data-highlighted] > [data-source] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[phx-hook="Dropzone"][data-js-dragging] {
|
[phx-hook="Dropzone"][data-js-dragging] {
|
||||||
@apply bg-blue-100 border-blue-300;
|
@apply bg-blue-100 border-blue-300;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* === Session === */
|
/* Session */
|
||||||
|
|
||||||
[data-el-session]:not([data-js-insert-mode]) [data-el-insert-mode-indicator] {
|
[data-el-session] {
|
||||||
@apply invisible;
|
/* Sections */
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]:not([data-js-insert-mode])
|
[data-el-notebook-headline],
|
||||||
[data-el-cell][data-type="markdown"]
|
[data-el-section-headline] {
|
||||||
[data-el-editor-box],
|
&:hover [data-el-heading] {
|
||||||
[data-el-session][data-js-insert-mode]
|
@apply border-blue-200;
|
||||||
[data-el-cell][data-type="markdown"]:not([data-js-focused])
|
}
|
||||||
[data-el-editor-box] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-insert-mode]
|
&[data-js-focused] [data-el-heading] {
|
||||||
[data-el-cell][data-js-focused]
|
@apply border-blue-300 outline-none;
|
||||||
[data-el-enable-insert-mode-button] {
|
}
|
||||||
@apply hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]:not([data-js-insert-mode])
|
[data-el-section-headline]:not(:hover, [data-js-focused])
|
||||||
[data-el-cell][data-type="markdown"][data-js-focused]
|
[data-el-section-actions] {
|
||||||
[data-el-insert-image-button] {
|
@apply hidden;
|
||||||
@apply hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-notebook-headline]:hover [data-el-heading],
|
[data-el-section][data-js-collapsed] [data-el-section-collapse-button],
|
||||||
[data-el-section-headline]:hover [data-el-heading] {
|
&:not([data-js-hide-section])
|
||||||
@apply border-blue-200;
|
[data-el-section][data-js-collapsed]
|
||||||
}
|
[data-el-section-content] {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-notebook-headline][data-js-focused] [data-el-heading],
|
[data-el-section]:not([data-js-collapsed])
|
||||||
[data-el-section-headline][data-js-focused] [data-el-heading] {
|
:is(
|
||||||
@apply border-blue-300 outline-none;
|
[data-el-section-headline]:not(:hover, [data-js-focused])
|
||||||
}
|
[data-el-section-collapse-button],
|
||||||
|
[data-el-section-expand-button],
|
||||||
|
[data-el-section-subheadline-collapsed]
|
||||||
|
) {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-section-headline]:not(:hover):not([data-js-focused])
|
/* Cells */
|
||||||
[data-el-heading]
|
|
||||||
+ [data-el-section-actions]:not(:focus-within) {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-section][data-js-collapsed] [data-el-section-collapse-button],
|
&:not([data-js-insert-mode]) [data-el-insert-mode-indicator] {
|
||||||
[data-el-section]:not([data-js-collapsed])
|
@apply invisible;
|
||||||
[data-el-section-headline]:not(:hover):not([data-js-focused])
|
}
|
||||||
[data-el-section-collapse-button],
|
|
||||||
[data-el-section]:not([data-js-collapsed]) [data-el-section-expand-button],
|
|
||||||
[data-el-session]:not([data-js-view="code-zen"])
|
|
||||||
[data-el-section][data-js-collapsed]
|
|
||||||
> [data-el-section-content],
|
|
||||||
[data-el-section]:not([data-js-collapsed])
|
|
||||||
> [data-el-section-subheadline-collapsed] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]:not([data-js-dragging]) [data-el-insert-drop-area] {
|
[data-el-cell][data-js-hover] [data-el-cell-focus-indicator] {
|
||||||
@apply hidden;
|
@apply bg-blue-200;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-session]:not([data-js-dragging="external"]) [data-el-files-drop-area] {
|
[data-el-cell][data-js-focused] {
|
||||||
@apply hidden;
|
@apply border-blue-300 border-opacity-100;
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-dragging="external"] [data-el-files-add-button] {
|
[data-el-cell-focus-indicator] {
|
||||||
@apply hidden;
|
@apply bg-blue-300;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-cell][data-js-focused] {
|
[data-el-cell]:not([data-js-focused]) {
|
||||||
@apply border-blue-300 border-opacity-100;
|
/* We use opacity, so the buttons are focusable via tab navigation */
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-cell]:not([data-js-focused]) [data-el-actions]:not(:focus-within) {
|
& [data-el-actions][data-secondary] {
|
||||||
/* Note: using opacity, so the buttons are focusable (via tab navigation)
|
@apply opacity-0 pointer-events-none;
|
||||||
and when focused we show the actions back. */
|
}
|
||||||
@apply opacity-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-cell]:not([data-js-focused])
|
&:not([data-js-hover]) [data-el-actions][data-primary] {
|
||||||
[data-el-actions]:not([data-primary]):not(:focus-within) {
|
@apply opacity-0;
|
||||||
@apply pointer-events-none;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-cell]:not([data-js-focused])[data-js-hover]
|
[data-el-cell][data-js-changed] [data-el-cell-status] {
|
||||||
[data-el-actions][data-primary] {
|
@apply italic;
|
||||||
@apply opacity-100 pointer-events-auto;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-cell][data-js-changed] [data-el-cell-status] {
|
[data-el-cell]:not([data-js-changed])
|
||||||
@apply italic;
|
[data-el-cell-status]
|
||||||
}
|
[data-el-change-indicator] {
|
||||||
|
@apply invisible;
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-cell]:not([data-js-changed])
|
[data-el-cell][data-type="markdown"]:not([data-js-insert-mode])
|
||||||
[data-el-cell-status]
|
[data-el-editor-box] {
|
||||||
[data-el-change-indicator] {
|
@apply hidden;
|
||||||
@apply invisible;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-outline-item][data-js-is-viewed] {
|
[data-el-cell][data-type="markdown"][data-js-insert-mode]
|
||||||
@apply text-gray-900;
|
[data-el-enable-insert-mode-button] {
|
||||||
}
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-cell]:not([data-js-focused])[data-js-hover]
|
[data-el-cell][data-type="smart"][data-js-source-visible] {
|
||||||
[data-el-cell-focus-indicator] {
|
[data-el-ui-box] {
|
||||||
@apply bg-blue-200;
|
@apply hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-cell][data-js-focused] [data-el-cell-focus-indicator] {
|
[data-el-toggle-source-button] > button {
|
||||||
@apply bg-blue-300;
|
@apply bg-gray-100 text-gray-900;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-cell][data-js-amplified] [data-el-outputs-container] {
|
[data-el-cell][data-type="smart"]:not([data-js-source-visible]) {
|
||||||
@apply bg-white m-0 py-16;
|
[data-el-editor-box] {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
width: 90vw;
|
[data-el-cell-indicators] {
|
||||||
position: relative;
|
@apply static flex justify-end pt-2;
|
||||||
left: calc(-45vw + 50%);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-cell][data-js-amplified] [data-el-amplify-outputs-button] > button {
|
[data-el-cell-indicator] {
|
||||||
@apply bg-gray-100 text-gray-900;
|
@apply bg-gray-50 border-gray-200 text-gray-500;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-cell][data-type="smart"]:not([data-js-source-visible])
|
|
||||||
[data-el-editor-box] {
|
|
||||||
/* Note: we intentionally don't hide the editor, because this leads
|
|
||||||
to issues with hover intellisense once the editor is shown. */
|
|
||||||
@apply h-0 overflow-hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-cell][data-type="smart"][data-js-source-visible] [data-el-ui-box] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-cell][data-type="smart"]:not([data-js-source-visible])
|
|
||||||
[data-el-cell-indicators] {
|
|
||||||
@apply static flex justify-end pt-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-cell][data-type="smart"]:not([data-js-source-visible])
|
|
||||||
[data-el-cell-indicator] {
|
|
||||||
@apply bg-gray-50 border-gray-200 text-gray-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]
|
|
||||||
[data-el-cell][data-type="setup"]:not(
|
[data-el-cell][data-type="setup"]:not(
|
||||||
[data-eval-validity="fresh"]:not([data-js-empty])
|
[data-js-focused],
|
||||||
):not([data-eval-errored]):not([data-js-changed]):not([data-js-focused])
|
[data-eval-validity="fresh"]:not([data-js-empty]),
|
||||||
[data-el-editor-box] {
|
[data-eval-errored],
|
||||||
@apply h-0 overflow-hidden;
|
[data-js-changed]
|
||||||
}
|
) {
|
||||||
|
[data-el-editor-box] {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-session]
|
[data-el-cell-indicator] {
|
||||||
[data-el-cell][data-type="setup"]:not(
|
@apply bg-gray-50 border-gray-200 text-gray-500;
|
||||||
[data-eval-validity="fresh"]:not([data-js-empty])
|
}
|
||||||
):not([data-eval-errored]):not([data-js-changed]):not([data-js-focused])
|
}
|
||||||
[data-el-cell-indicator] {
|
|
||||||
@apply bg-gray-50 border-gray-200 text-gray-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]
|
[data-el-cell][data-type="setup"]:is(
|
||||||
[data-el-cell][data-type="setup"][data-js-focused]
|
[data-js-focused],
|
||||||
[data-el-info-box],
|
[data-eval-validity="fresh"]:not([data-js-empty]),
|
||||||
[data-el-session]
|
[data-eval-errored],
|
||||||
[data-el-cell][data-type="setup"][data-eval-validity="fresh"]:not(
|
[data-js-changed]
|
||||||
[data-js-empty]
|
)
|
||||||
)
|
[data-el-info-box] {
|
||||||
[data-el-info-box],
|
@apply hidden;
|
||||||
[data-el-session]
|
}
|
||||||
[data-el-cell][data-type="setup"][data-eval-errored]
|
|
||||||
[data-el-info-box],
|
|
||||||
[data-el-session]
|
|
||||||
[data-el-cell][data-type="setup"][data-js-changed]
|
|
||||||
[data-el-info-box] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-cell][data-type="smart"][data-js-source-visible]
|
/* Outputs */
|
||||||
[data-el-toggle-source-button]
|
|
||||||
> button {
|
|
||||||
@apply bg-gray-100 text-gray-900;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-cell][data-type="smart"][data-js-source-visible]
|
[data-el-cell][data-js-amplified] {
|
||||||
[data-el-cell-status-container] {
|
[data-el-amplify-outputs-button] > button {
|
||||||
@apply absolute bottom-2 right-2;
|
@apply bg-gray-100 text-gray-900;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-output][data-border] {
|
[data-el-outputs-container] {
|
||||||
@apply p-4 border border-t-0 border-gray-200 divide-y divide-gray-200;
|
@apply bg-white m-0 py-16;
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-output][data-border]:first-child {
|
width: 90vw;
|
||||||
@apply rounded-t-lg border-t;
|
position: relative;
|
||||||
}
|
left: calc(-45vw + 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-output]:not([data-border]) + [data-el-output][data-border] {
|
[data-el-output][data-border] {
|
||||||
@apply border-t;
|
@apply p-4 border border-t-0 border-gray-200 divide-y divide-gray-200;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-output][data-border]:last-child {
|
[data-el-output][data-border]:first-child {
|
||||||
@apply rounded-b-lg border-b;
|
@apply rounded-t-lg border-t;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-output]:not(:first-child) {
|
[data-el-output]:not([data-border]) + [data-el-output][data-border] {
|
||||||
@apply mt-2;
|
@apply border-t;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-output][data-border] + [data-el-output][data-border] {
|
[data-el-output][data-border]:last-child {
|
||||||
@apply mt-0;
|
@apply rounded-b-lg border-b;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-outputs-container] > [data-el-output]:first-child {
|
[data-el-output]:not(:first-child) {
|
||||||
@apply mt-2;
|
@apply mt-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-session]:not([data-js-side-panel-content]) [data-el-side-panel] {
|
[data-el-output][data-border] + [data-el-output][data-border] {
|
||||||
@apply hidden;
|
@apply mt-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-el-session]:not([data-js-side-panel-content="outline"])
|
[data-el-outputs-container] > [data-el-output]:first-child {
|
||||||
[data-el-outline] {
|
@apply mt-2;
|
||||||
@apply hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]:not([data-js-side-panel-content="clients-list"])
|
/* Side panel */
|
||||||
[data-el-clients-list] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]:not([data-js-side-panel-content="secrets-list"])
|
&:not([data-js-side-panel-content]) [data-el-side-panel] {
|
||||||
[data-el-secrets-list] {
|
@apply hidden;
|
||||||
@apply hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]:not([data-js-side-panel-content="files-list"])
|
&:not([data-js-side-panel-content="outline"]) [data-el-outline],
|
||||||
[data-el-files-list] {
|
&:not([data-js-side-panel-content="clients-list"]) [data-el-clients-list],
|
||||||
@apply hidden;
|
&:not([data-js-side-panel-content="secrets-list"]) [data-el-secrets-list],
|
||||||
}
|
&:not([data-js-side-panel-content="files-list"]) [data-el-files-list],
|
||||||
|
&:not([data-js-side-panel-content="runtime-info"]) [data-el-runtime-info],
|
||||||
|
&:not([data-js-side-panel-content="app-info"]) [data-el-app-info] {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-session]:not([data-js-side-panel-content="runtime-info"])
|
&[data-js-side-panel-content="outline"] [data-el-outline-toggle],
|
||||||
[data-el-runtime-info] {
|
&[data-js-side-panel-content="clients-list"] [data-el-clients-list-toggle],
|
||||||
@apply hidden;
|
&[data-js-side-panel-content="secrets-list"] [data-el-secrets-list-toggle],
|
||||||
}
|
&[data-js-side-panel-content="files-list"] [data-el-files-list-toggle],
|
||||||
|
&[data-js-side-panel-content="runtime-info"] [data-el-runtime-info-toggle],
|
||||||
|
&[data-js-side-panel-content="app-info"] [data-el-app-info-toggle] {
|
||||||
|
@apply text-gray-50 bg-gray-700;
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-session][data-js-side-panel-content="runtime-info"]
|
&[data-js-side-panel-content="runtime-info"] [data-el-runtime-indicator] {
|
||||||
[data-el-runtime-indicator] {
|
@apply border-gray-700;
|
||||||
@apply border-gray-700;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]:not([data-js-side-panel-content="app-info"])
|
[data-el-clients-list-item]:not([data-js-followed]) [data-meta="unfollow"] {
|
||||||
[data-el-app-info] {
|
@apply hidden;
|
||||||
@apply hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-side-panel-content="outline"]
|
[data-el-clients-list-item][data-js-followed] [data-meta="follow"] {
|
||||||
[data-el-outline-toggle] {
|
@apply hidden;
|
||||||
@apply text-gray-50 bg-gray-700;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-side-panel-content="clients-list"]
|
[data-el-outline-item][data-js-is-viewed] {
|
||||||
[data-el-clients-list-toggle] {
|
@apply text-gray-900;
|
||||||
@apply text-gray-50 bg-gray-700;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-side-panel-content="secrets-list"]
|
/* Drag and drop */
|
||||||
[data-el-secrets-list-toggle] {
|
|
||||||
@apply text-gray-50 bg-gray-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-side-panel-content="files-list"]
|
&:not([data-js-dragging]) [data-el-insert-drop-area] {
|
||||||
[data-el-files-list-toggle] {
|
@apply hidden;
|
||||||
@apply text-gray-50 bg-gray-700;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-side-panel-content="runtime-info"]
|
&:not([data-js-dragging="external"]) [data-el-files-drop-area] {
|
||||||
[data-el-runtime-info-toggle] {
|
@apply hidden;
|
||||||
@apply text-gray-50 bg-gray-700;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-side-panel-content="app-info"]
|
&[data-js-dragging="external"] [data-el-files-add-button] {
|
||||||
[data-el-app-info-toggle] {
|
@apply hidden;
|
||||||
@apply text-gray-50 bg-gray-700;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-clients-list-item]:not([data-js-followed]) [data-meta="unfollow"] {
|
/* Session views */
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-clients-list-item][data-js-followed] [data-meta="follow"] {
|
&[data-js-view="code-zen"] [data-el-view-toggle="code-zen"],
|
||||||
@apply hidden;
|
&[data-js-view="presentation"] [data-el-view-toggle="presentation"],
|
||||||
}
|
&[data-js-view="custom"] [data-el-view-toggle="custom"] {
|
||||||
|
@apply text-green-bright-400;
|
||||||
|
}
|
||||||
|
|
||||||
/* === Session views === */
|
&[data-js-view] {
|
||||||
|
[data-el-actions],
|
||||||
|
[data-el-insert-buttons] {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-session][data-js-view="code-zen"] [data-el-view-toggle="code-zen"] {
|
[data-el-views-disabled] {
|
||||||
@apply text-green-bright-400;
|
@apply hidden;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-session][data-js-view="presentation"]
|
&:not([data-js-view]) [data-el-views-enabled] {
|
||||||
[data-el-view-toggle="presentation"] {
|
@apply hidden;
|
||||||
@apply text-green-bright-400;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-view="custom"] [data-el-view-toggle="custom"] {
|
&[data-js-hide-output] {
|
||||||
@apply text-green-bright-400;
|
[data-el-outputs-container] {
|
||||||
}
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-el-session][data-js-view]
|
&[data-js-hide-section] {
|
||||||
:is([data-el-actions], [data-el-insert-buttons]) {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session][data-js-view] [data-el-views-disabled] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-el-session]:not([data-js-view]) [data-el-views-enabled] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-js-hide-output] [data-el-output] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-js-hide-section]
|
|
||||||
:is(
|
|
||||||
[data-el-section-headline],
|
[data-el-section-headline],
|
||||||
[data-el-section-subheadline],
|
[data-el-section-subheadline],
|
||||||
[data-el-section-subheadline-collapsed]
|
[data-el-section-subheadline-collapsed] {
|
||||||
) {
|
@apply hidden;
|
||||||
@apply hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-js-hide-section] [data-el-sections-container] {
|
[data-el-sections-container] {
|
||||||
@apply space-y-0 mt-0;
|
@apply space-y-0 mt-0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-js-hide-markdown] [data-el-cell][data-type="markdown"] {
|
&[data-js-hide-markdown] {
|
||||||
@apply hidden;
|
[data-el-cell][data-type="markdown"] {
|
||||||
}
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
|
&[data-js-hide-code] {
|
||||||
[data-el-cell]
|
[data-el-cell]:is(
|
||||||
[data-el-cell-indicator],
|
[data-type="code"],
|
||||||
[data-js-hide-code][data-el-session]
|
[data-type="setup"],
|
||||||
[data-el-cell]:not([data-js-focused])
|
[data-type="smart"]
|
||||||
[data-el-cell-indicator] {
|
):not([data-js-insert-mode]) {
|
||||||
@apply bg-gray-50 border-gray-200 text-gray-500;
|
[data-el-editor-box],
|
||||||
}
|
&[data-type="setup"] [data-el-info-box],
|
||||||
|
&[data-type="smart"] [data-el-ui-box] {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
|
[data-el-cell-body-root]:after {
|
||||||
[data-el-cell][data-type="code"]
|
@apply flex py-2 px-3 border border-gray-200 rounded-lg text-sm text-gray-400 font-medium;
|
||||||
[data-el-editor-box],
|
content: "Code";
|
||||||
[data-js-hide-code][data-el-session][data-js-insert-mode]
|
}
|
||||||
[data-el-cell][data-type="code"]:not([data-js-focused])
|
|
||||||
[data-el-editor-box] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-js-hide-code][data-el-session]
|
[data-el-cell-indicator] {
|
||||||
[data-el-cell][data-type="setup"]
|
@apply bg-gray-50 border-gray-200 text-gray-500;
|
||||||
[data-el-info-box],
|
}
|
||||||
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
|
|
||||||
[data-el-cell][data-type="setup"]
|
|
||||||
[data-el-editor-box],
|
|
||||||
[data-js-hide-code][data-el-session][data-js-insert-mode]
|
|
||||||
[data-el-cell][data-type="setup"]:not([data-js-focused])
|
|
||||||
[data-el-editor-box] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-js-hide-code] [data-el-cell][data-type="smart"] [data-el-ui-box] {
|
&[data-type="smart"] [data-el-cell-indicators] {
|
||||||
@apply hidden;
|
@apply absolute bottom-2 right-2;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
|
&[data-js-spotlight] {
|
||||||
[data-el-cell][data-type="smart"]
|
|
||||||
[data-el-editor-box],
|
|
||||||
[data-js-hide-code][data-el-session][data-js-insert-mode]
|
|
||||||
[data-el-cell][data-type="smart"]:not([data-js-focused])
|
|
||||||
[data-el-editor-box] {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
|
|
||||||
[data-el-cell][data-type="code"]
|
|
||||||
[data-el-cell-body-root]:after,
|
|
||||||
[data-js-hide-code][data-el-session][data-js-insert-mode]
|
|
||||||
[data-el-cell][data-type="code"]:not([data-js-focused])
|
|
||||||
[data-el-cell-body-root]:after,
|
|
||||||
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
|
|
||||||
[data-el-cell][data-type="setup"]
|
|
||||||
[data-el-cell-body-root]:after,
|
|
||||||
[data-js-hide-code][data-el-session][data-js-insert-mode]
|
|
||||||
[data-el-cell][data-type="setup"]:not([data-js-focused])
|
|
||||||
[data-el-cell-body-root]:after,
|
|
||||||
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
|
|
||||||
[data-el-cell][data-type="smart"]
|
|
||||||
[data-el-cell-body-root]:after,
|
|
||||||
[data-js-hide-code][data-el-session][data-js-insert-mode]
|
|
||||||
[data-el-cell][data-type="smart"]:not([data-js-focused])
|
|
||||||
[data-el-cell-body-root]:after {
|
|
||||||
content: "Code";
|
|
||||||
|
|
||||||
@apply flex py-2 px-3 border border-gray-200 rounded-lg text-sm text-gray-400 font-medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
|
|
||||||
[data-el-cell][data-type="smart"]
|
|
||||||
[data-el-cell-indicators],
|
|
||||||
[data-js-hide-code][data-el-session][data-js-insert-mode]
|
|
||||||
[data-el-cell][data-type="smart"]:not([data-js-focused])
|
|
||||||
[data-el-cell-indicators] {
|
|
||||||
@apply absolute bottom-2 right-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-js-spotlight]
|
|
||||||
:is(
|
|
||||||
[data-el-section-headline]:not([data-js-focused]),
|
[data-el-section-headline]:not([data-js-focused]),
|
||||||
[data-el-section-subheadline]:not([data-js-focused]),
|
[data-el-section-subheadline]:not([data-js-focused]),
|
||||||
[data-el-cell]:not([data-js-focused]),
|
[data-el-cell]:not([data-js-focused]),
|
||||||
[data-el-js-view-iframes] iframe:not([data-js-focused])
|
[data-el-js-view-iframes] iframe:not([data-js-focused]) {
|
||||||
) {
|
@apply opacity-10;
|
||||||
@apply opacity-10;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-js-spotlight]
|
[data-el-sidebar],
|
||||||
:is([data-el-sidebar], [data-el-side-panel], [data-el-toggle-sidebar]) {
|
[data-el-side-panel],
|
||||||
@apply hidden;
|
[data-el-toggle-sidebar] {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -330,6 +330,7 @@ const Cell = {
|
||||||
handleInsertModeChanged(insertMode) {
|
handleInsertModeChanged(insertMode) {
|
||||||
if (this.isFocused && !this.insertMode && insertMode) {
|
if (this.isFocused && !this.insertMode && insertMode) {
|
||||||
this.insertMode = insertMode;
|
this.insertMode = insertMode;
|
||||||
|
this.el.setAttribute("data-js-insert-mode", "");
|
||||||
|
|
||||||
if (this.currentEditor()) {
|
if (this.currentEditor()) {
|
||||||
this.currentEditor().focus();
|
this.currentEditor().focus();
|
||||||
|
|
@ -337,6 +338,7 @@ const Cell = {
|
||||||
}
|
}
|
||||||
} else if (this.insertMode && !insertMode) {
|
} else if (this.insertMode && !insertMode) {
|
||||||
this.insertMode = insertMode;
|
this.insertMode = insertMode;
|
||||||
|
this.el.removeAttribute("data-js-insert-mode");
|
||||||
|
|
||||||
if (this.currentEditor()) {
|
if (this.currentEditor()) {
|
||||||
this.currentEditor().blur();
|
this.currentEditor().blur();
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ const Highlight = {
|
||||||
|
|
||||||
const html = highlight(code, this.props.language);
|
const html = highlight(code, this.props.language);
|
||||||
this.targetEl.innerHTML = html;
|
this.targetEl.innerHTML = html;
|
||||||
this.el.setAttribute("data-highlighted", "");
|
this.sourceEl.style.display = "none";
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
90
assets/package-lock.json
generated
90
assets/package-lock.json
generated
|
|
@ -4,7 +4,6 @@
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "assets",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@codemirror/autocomplete": "^6.11.1",
|
"@codemirror/autocomplete": "^6.11.1",
|
||||||
"@codemirror/commands": "^6.3.3",
|
"@codemirror/commands": "^6.3.3",
|
||||||
|
|
@ -66,6 +65,7 @@
|
||||||
"esbuild-style-plugin": "^1.6.2",
|
"esbuild-style-plugin": "^1.6.2",
|
||||||
"postcss": "^8.2.3",
|
"postcss": "^8.2.3",
|
||||||
"postcss-import": "^16.0.0",
|
"postcss-import": "^16.0.0",
|
||||||
|
"postcss-nesting": "^13.0.1",
|
||||||
"prettier": "^3.0.3"
|
"prettier": "^3.0.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -12666,6 +12666,94 @@
|
||||||
"postcss": "^8.2.14"
|
"postcss": "^8.2.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/postcss-nesting": {
|
||||||
|
"version": "13.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.1.tgz",
|
||||||
|
"integrity": "sha512-VbqqHkOBOt4Uu3G8Dm8n6lU5+9cJFxiuty9+4rcoyRPO9zZS1JIs6td49VIoix3qYqELHlJIn46Oih9SAKo+yQ==",
|
||||||
|
"dev": true,
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/csstools"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/csstools"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT-0",
|
||||||
|
"dependencies": {
|
||||||
|
"@csstools/selector-resolve-nested": "^3.0.0",
|
||||||
|
"@csstools/selector-specificity": "^5.0.0",
|
||||||
|
"postcss-selector-parser": "^7.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"postcss": "^8.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/postcss-nesting/node_modules/@csstools/selector-resolve-nested": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-ZoK24Yku6VJU1gS79a5PFmC8yn3wIapiKmPgun0hZgEI5AOqgH2kiPRsPz1qkGv4HL+wuDLH83yQyk6inMYrJQ==",
|
||||||
|
"dev": true,
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/csstools"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/csstools"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT-0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"postcss-selector-parser": "^7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==",
|
||||||
|
"dev": true,
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/csstools"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/csstools"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT-0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"postcss-selector-parser": "^7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/postcss-nesting/node_modules/postcss-selector-parser": {
|
||||||
|
"version": "7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
|
||||||
|
"integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"cssesc": "^3.0.0",
|
||||||
|
"util-deprecate": "^1.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/postcss-selector-parser": {
|
"node_modules/postcss-selector-parser": {
|
||||||
"version": "6.1.2",
|
"version": "6.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -69,6 +69,7 @@
|
||||||
"esbuild-style-plugin": "^1.6.2",
|
"esbuild-style-plugin": "^1.6.2",
|
||||||
"postcss": "^8.2.3",
|
"postcss": "^8.2.3",
|
||||||
"postcss-import": "^16.0.0",
|
"postcss-import": "^16.0.0",
|
||||||
|
"postcss-nesting": "^13.0.1",
|
||||||
"prettier": "^3.0.3"
|
"prettier": "^3.0.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -301,6 +301,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
|
||||||
role="toolbar"
|
role="toolbar"
|
||||||
aria-label="cell actions"
|
aria-label="cell actions"
|
||||||
data-el-actions
|
data-el-actions
|
||||||
|
data-secondary
|
||||||
>
|
>
|
||||||
{render_slot(@secondary)}
|
{render_slot(@secondary)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue