@examind/block-editor 0.1.17 → 0.1.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +101 -51
  2. package/dist/index.d.mts +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +1710 -1552
  5. package/dist/index.mjs +1008 -849
  6. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -326,11 +326,6 @@
326
326
  outline-offset: 3px;
327
327
  border-radius: var(--sl-border-radius-small);
328
328
  }
329
- [data-settings-node-selected] {
330
- outline: 1px dashed var(--sl-color-primary-400) !important;
331
- outline-offset: 3px !important;
332
- border-radius: var(--sl-border-radius-small) !important;
333
- }
334
329
  }
335
330
  @media (max-width: 767px) {
336
331
  .content {
@@ -1765,6 +1760,11 @@ sl-progress-bar {
1765
1760
  display: flex;
1766
1761
  flex-direction: column;
1767
1762
  position: relative;
1763
+ &[data-settings-node-selected] {
1764
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
1765
+ outline-offset: 3px !important;
1766
+ border-radius: var(--sl-border-radius-small) !important;
1767
+ }
1768
1768
  }
1769
1769
  .image-box-wrapper:first-child {
1770
1770
  margin-top: 0;
@@ -1910,6 +1910,11 @@ sl-progress-bar {
1910
1910
  position: relative;
1911
1911
  margin-top: var(--sl-spacing-large);
1912
1912
  margin-bottom: var(--sl-spacing-large);
1913
+ &[data-settings-node-selected] {
1914
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
1915
+ outline-offset: 3px !important;
1916
+ border-radius: var(--sl-border-radius-small) !important;
1917
+ }
1913
1918
  }
1914
1919
  .callout-box-wrapper:first-child {
1915
1920
  margin-top: 0;
@@ -1972,6 +1977,11 @@ sl-progress-bar {
1972
1977
  position: relative;
1973
1978
  margin-top: var(--sl-spacing-large);
1974
1979
  margin-bottom: var(--sl-spacing-large);
1980
+ &[data-settings-node-selected]:not(:focus-within) {
1981
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
1982
+ outline-offset: 3px !important;
1983
+ border-radius: var(--sl-border-radius-small) !important;
1984
+ }
1975
1985
  }
1976
1986
  .multiple-option-question-wrapper:first-child {
1977
1987
  margin-top: 0;
@@ -1987,71 +1997,70 @@ sl-progress-bar {
1987
1997
  }
1988
1998
  .multiple-option-question-prompt-title {
1989
1999
  font-size: var(--sl-font-size-medium);
1990
- font-weight: var(--sl-font-weight-bold);
2000
+ font-weight: var(--sl-font-weight-normal);
1991
2001
  color: var(--sl-color-neutral-600);
2002
+ text-transform: uppercase;
1992
2003
  }
1993
2004
  .multiple-option-question-prompt-options {
1994
2005
  flex-grow: 1;
1995
2006
  display: flex;
1996
2007
  flex-direction: column;
1997
- gap: var(--sl-spacing-x-small);
2008
+ gap: 6px;
1998
2009
  }
1999
2010
  .multiple-option-question-prompt-option-item {
2000
2011
  position: relative;
2001
2012
  display: flex;
2002
- flex-direction: column;
2003
- gap: var(--sl-spacing-2x-small);
2004
- padding-top: var(--sl-spacing-2x-small);
2005
- padding-left: var(--sl-spacing-small);
2006
- padding-right: var(--sl-spacing-3x-large);
2007
- padding-bottom: var(--sl-spacing-small);
2008
- border: 1px solid var(--sl-color-neutral-300);
2009
- border-radius: var(--sl-border-radius-medium);
2013
+ flex-direction: row;
2014
+ align-items: center;
2015
+ gap: 8px;
2016
+ padding-top: 2px;
2017
+ padding-left: 0;
2018
+ padding-right: 2px;
2019
+ padding-bottom: 2px;
2020
+ .none-of-the-above-item {
2021
+ width: 100%;
2022
+ border-radius: 4px;
2023
+ padding: 8px;
2024
+ outline: 1px solid var(--sl-color-neutral-1000);
2025
+ }
2010
2026
  .controls {
2011
- position: absolute;
2012
- top: calc(50% - 20px);
2013
- right: -32px;
2014
2027
  display: flex;
2015
2028
  flex-direction: row;
2016
- z-index: 10;
2017
- sl-button::part(base) {
2018
- padding-inline: var(--sl-spacing-x-small);
2029
+ align-items: center;
2030
+ gap: 6px;
2031
+ .sl-icon {
2032
+ width: 20px;
2033
+ height: 20px;
2019
2034
  }
2020
- }
2021
- &.correct {
2022
- border-color: var(--sl-color-success-300);
2023
- background-color: var(--sl-color-success-50);
2024
- .title,
2025
- .controls {
2035
+ sl-button[size=small].button_icon::part(base),
2036
+ sl-button[size=medium].button_icon::part(base),
2037
+ sl-button[size=large].button_icon::part(base) {
2038
+ padding-inline: 0;
2039
+ padding: 2px;
2040
+ }
2041
+ sl-button.button_icon::part(base) {
2042
+ border: 0;
2043
+ min-height: auto;
2044
+ align-items: center;
2045
+ }
2046
+ sl-button.neutral::part(base) {
2047
+ color: var(--sl-color-neutral-700);
2048
+ }
2049
+ sl-button.success::part(base) {
2026
2050
  color: var(--sl-color-success-500);
2027
- sl-button::part(base) {
2028
- color: var(--sl-color-success-400);
2029
- }
2030
- sl-button::part(base):hover {
2031
- color: var(--sl-color-success-500);
2032
- }
2033
2051
  }
2034
- }
2035
- &.incorrect {
2036
- border-color: var(--sl-color-danger-300);
2037
- background-color: var(--sl-color-danger-50);
2038
- .title,
2039
- .controls {
2052
+ sl-button.danger::part(base) {
2040
2053
  color: var(--sl-color-danger-500);
2041
- sl-button::part(base) {
2042
- color: var(--sl-color-danger-400);
2043
- }
2044
- sl-button::part(base):hover {
2045
- color: var(--sl-color-danger-500);
2046
- }
2047
2054
  }
2048
2055
  }
2049
- .title {
2050
- display: flex;
2051
- flex-direction: row;
2052
- align-items: center;
2053
- gap: var(--sl-spacing-x-small);
2054
- font-size: var(--sl-font-size-x-small);
2056
+ .nested-content {
2057
+ width: 100%;
2058
+ border-radius: 4px;
2059
+ padding: 8px;
2060
+ outline: 1px solid var(--sl-color-neutral-1000);
2061
+ }
2062
+ .nested-content:focus {
2063
+ outline: 1px solid #7b00ff;
2055
2064
  }
2056
2065
  p,
2057
2066
  h1,
@@ -2063,6 +2072,12 @@ sl-progress-bar {
2063
2072
  line-height: var(--sl-line-height-normal);
2064
2073
  }
2065
2074
  }
2075
+ .multiple-option-question-prompt-footer {
2076
+ display: flex;
2077
+ flex-direction: row;
2078
+ justify-items: center;
2079
+ justify-content: end;
2080
+ }
2066
2081
  }
2067
2082
 
2068
2083
  /* src/styles/article-short-answer-question.css */
@@ -2071,6 +2086,11 @@ sl-progress-bar {
2071
2086
  position: relative;
2072
2087
  margin-top: var(--sl-spacing-large);
2073
2088
  margin-bottom: var(--sl-spacing-large);
2089
+ &[data-settings-node-selected] {
2090
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
2091
+ outline-offset: 3px !important;
2092
+ border-radius: var(--sl-border-radius-small) !important;
2093
+ }
2074
2094
  }
2075
2095
  .short-answer-question-wrapper:first-child {
2076
2096
  margin-top: 0;
@@ -2128,6 +2148,11 @@ sl-progress-bar {
2128
2148
  position: relative;
2129
2149
  margin-top: var(--sl-spacing-large);
2130
2150
  margin-bottom: var(--sl-spacing-large);
2151
+ &[data-settings-node-selected] {
2152
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
2153
+ outline-offset: 3px !important;
2154
+ border-radius: var(--sl-border-radius-small) !important;
2155
+ }
2131
2156
  }
2132
2157
  .matching-question-wrapper:first-child {
2133
2158
  margin-top: 0;
@@ -2249,6 +2274,11 @@ sl-progress-bar {
2249
2274
  position: relative;
2250
2275
  margin-top: var(--sl-spacing-large);
2251
2276
  margin-bottom: var(--sl-spacing-large);
2277
+ &[data-settings-node-selected] {
2278
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
2279
+ outline-offset: 3px !important;
2280
+ border-radius: var(--sl-border-radius-small) !important;
2281
+ }
2252
2282
  }
2253
2283
  .fill-in-the-blank-question-wrapper:first-child {
2254
2284
  margin-top: 0;
@@ -2322,6 +2352,11 @@ sl-progress-bar {
2322
2352
  position: relative;
2323
2353
  margin-top: var(--sl-spacing-large);
2324
2354
  margin-bottom: var(--sl-spacing-large);
2355
+ &[data-settings-node-selected] {
2356
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
2357
+ outline-offset: 3px !important;
2358
+ border-radius: var(--sl-border-radius-small) !important;
2359
+ }
2325
2360
  }
2326
2361
  .journal-entry-question-wrapper:first-child {
2327
2362
  margin-top: 0;
@@ -2446,6 +2481,11 @@ sl-progress-bar {
2446
2481
  position: relative;
2447
2482
  margin-top: var(--sl-spacing-large);
2448
2483
  margin-bottom: var(--sl-spacing-large);
2484
+ &[data-settings-node-selected] {
2485
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
2486
+ outline-offset: 3px !important;
2487
+ border-radius: var(--sl-border-radius-small) !important;
2488
+ }
2449
2489
  }
2450
2490
  .financial-statement-question-wrapper:first-child {
2451
2491
  margin-top: 0;
@@ -2492,6 +2532,11 @@ sl-progress-bar {
2492
2532
  position: relative;
2493
2533
  margin-top: var(--sl-spacing-large);
2494
2534
  margin-bottom: var(--sl-spacing-large);
2535
+ &[data-settings-node-selected] {
2536
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
2537
+ outline-offset: 3px !important;
2538
+ border-radius: var(--sl-border-radius-small) !important;
2539
+ }
2495
2540
  }
2496
2541
  .essay-question-wrapper:first-child {
2497
2542
  margin-top: 0;
@@ -2549,6 +2594,11 @@ sl-progress-bar {
2549
2594
  position: relative;
2550
2595
  margin-top: var(--sl-spacing-large);
2551
2596
  margin-bottom: var(--sl-spacing-large);
2597
+ &[data-settings-node-selected] {
2598
+ outline: 1px solid var(--td-settings-node-selected-border-color) !important;
2599
+ outline-offset: 3px !important;
2600
+ border-radius: var(--sl-border-radius-small) !important;
2601
+ }
2552
2602
  }
2553
2603
  .simulation-question-wrapper:first-child {
2554
2604
  margin-top: 0;
package/dist/index.d.mts CHANGED
@@ -12,6 +12,7 @@ type ThemeSettings = {
12
12
  fontSizeBase?: string;
13
13
  focusRingWidth?: string;
14
14
  shadowLarge?: string;
15
+ focusRingColor?: string;
15
16
  };
16
17
 
17
18
  type BlockEditorProps = {
package/dist/index.d.ts CHANGED
@@ -12,6 +12,7 @@ type ThemeSettings = {
12
12
  fontSizeBase?: string;
13
13
  focusRingWidth?: string;
14
14
  shadowLarge?: string;
15
+ focusRingColor?: string;
15
16
  };
16
17
 
17
18
  type BlockEditorProps = {