@examind/block-editor 0.1.23 → 0.1.25

package/dist/index.css

@@ -321,6 +321,19 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      [data-editor-placeholder]::before {
+        content: attr(data-editor-placeholder);
+        color: var(--sl-color-neutral-400);
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 100%;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       [data-highlighted] {
         outline: 1px dashed var(--sl-color-neutral-300);
         outline-offset: 3px;
@@ -2012,11 +2025,7 @@ sl-progress-bar {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 8px;
-    padding-top: 2px;
-    padding-left: 0;
-    padding-right: 2px;
-    padding-bottom: 2px;
+    gap: 6px;
     .none-of-the-above-item {
       width: 100%;
       border-radius: 4px;
@@ -2154,7 +2163,7 @@ sl-progress-bar {
     position: relative;
     margin-top: var(--sl-spacing-large);
     margin-bottom: var(--sl-spacing-large);
-    &[data-settings-node-selected] {
+    &[data-settings-node-selected]:not(:focus-within) {
       outline: 1px solid var(--td-settings-node-selected-border-color) !important;
       outline-offset: 3px !important;
       border-radius: var(--sl-border-radius-small) !important;
@@ -2174,92 +2183,57 @@ sl-progress-bar {
   }
   .matching-question-prompt-title {
     font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-bold);
+    font-weight: var(--sl-font-weight-normal);
     color: var(--sl-color-neutral-600);
+    text-transform: uppercase;
   }
   .matching-question-prompt-items {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    gap: var(--sl-spacing-x-small);
-  }
-  .matching-question-prompt-question-item-wrapper {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--sl-spacing-small);
+    grid-template-columns: auto 1fr 1fr;
+    column-gap: 6px;
+    row-gap: 6px;
+    width: 100%;
   }
-  .matching-question-distractor-button {
+  .matching-question-prompt-question-item-controls {
     display: flex;
-    flex-flow: row;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
     justify-content: end;
-    color: var(--sl-color-danger-500);
-    sl-button::part(base) {
-      color: var(--sl-color-danger-400);
+    .sl-icon {
+      width: 20px;
+      height: 20px;
     }
-    sl-button::part(base):hover {
+    sl-button[size=small].button_icon::part(base),
+    sl-button[size=medium].button_icon::part(base),
+    sl-button[size=large].button_icon::part(base) {
+      padding-inline: 0;
+      padding: 2px;
+    }
+    sl-button.button_icon::part(base) {
+      border: 0;
+      min-height: auto;
+      align-items: center;
+    }
+    sl-button.neutral::part(base) {
+      color: var(--sl-color-neutral-700);
+    }
+    sl-button.success::part(base) {
+      color: var(--sl-color-success-500);
+    }
+    sl-button.danger::part(base) {
       color: var(--sl-color-danger-500);
     }
   }
   .matching-question-prompt-question-item {
-    flex-grow: 1;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: var(--sl-spacing-2x-small);
-    padding-top: var(--sl-spacing-2x-small);
-    padding-left: var(--sl-spacing-small);
-    padding-right: var(--sl-spacing-small);
-    padding-bottom: var(--sl-spacing-small);
-    border: 1px solid var(--sl-color-neutral-300);
-    border-radius: var(--sl-border-radius-medium);
-    color: var(--sl-color-neutral-500);
-    .controls {
-      position: absolute;
-      top: calc(50% - 20px);
-      right: -32px;
-      display: flex;
-      flex-direction: row;
-      z-index: 10;
-      sl-button::part(base) {
-        padding-inline: var(--sl-spacing-x-small);
-      }
-    }
-    &.correct {
-      border-color: var(--sl-color-success-300);
-      background-color: var(--sl-color-success-50);
-      padding-right: var(--sl-spacing-3x-large);
-      .title,
-      .controls {
-        color: var(--sl-color-success-500);
-        sl-button::part(base) {
-          color: var(--sl-color-success-400);
-        }
-        sl-button::part(base):hover {
-          color: var(--sl-color-success-500);
-        }
-      }
-    }
-    &.incorrect {
-      border-color: var(--sl-color-danger-300);
-      background-color: var(--sl-color-danger-50);
-      padding-right: var(--sl-spacing-3x-large);
-      .title,
-      .controls {
-        color: var(--sl-color-danger-500);
-        sl-button::part(base) {
-          color: var(--sl-color-danger-400);
-        }
-        sl-button::part(base):hover {
-          color: var(--sl-color-danger-500);
-        }
-      }
+    .nested-content {
+      width: 100%;
+      border-radius: 4px;
+      padding: 8px;
+      outline: 1px solid var(--sl-color-neutral-1000);
     }
-    .title {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--sl-spacing-x-small);
-      font-size: var(--sl-font-size-x-small);
+    .nested-content:focus {
+      outline: 1px solid #7b00ff;
     }
     p,
     h1,
@@ -2271,6 +2245,12 @@ sl-progress-bar {
       line-height: var(--sl-line-height-normal);
     }
   }
+  .matching-question-prompt-footer {
+    display: flex;
+    flex-direction: row;
+    justify-items: center;
+    justify-content: end;
+  }
 }
 
 /* src/styles/article-fill-in-the-blank-question.css */