npm - @sparkle-learning/core - Versions diffs - 0.0.27 → 0.0.30 - Mend

@sparkle-learning/core 0.0.27 → 0.0.30

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 (697) hide show

package/dist/node_modules/@ionic/core/dist/collection/components/refresher/refresher.ios.css CHANGED Viewed

@@ -133,11 +133,18 @@ ion-refresher.refresher-native ion-spinner {
   display: none;
   animation: var(--refreshing-rotation-duration) ease-out refresher-rotate forwards;
 }
 .refresher-native .refresher-refreshing {
   display: none;
   animation: 250ms linear refresher-pop forwards;
 }
+.refresher-native ion-spinner {
+  width: 32px;
+  height: 32px;
+  color: var(--ion-color-step-450, #747577);
+}
 .refresher-native.refresher-refreshing .refresher-pulling ion-spinner,
 .refresher-native.refresher-completing .refresher-pulling ion-spinner {
   display: none;
@@ -154,6 +161,11 @@ ion-refresher.refresher-native ion-spinner {
   display: none;
 }
+.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing-icon {
+  transform: scale(0) rotate(180deg);
+  transition: 300ms;
+}
 @keyframes refresher-pop {
   0% {
     transform: scale(1);

package/dist/node_modules/@ionic/core/dist/collection/components/refresher/refresher.md.css CHANGED Viewed

@@ -182,8 +182,8 @@ ion-refresher.refresher-native .refresher-refreshing-icon {
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
-  border: 1px solid #ececec;
-  background: white;
+  border: 1px solid var(--ion-color-step-200, #ececec);
+  background: var(--ion-color-step-250, #ffffff);
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {

package/dist/node_modules/@ionic/core/dist/collection/components/searchbar/searchbar.ios.css CHANGED Viewed

@@ -126,7 +126,7 @@
   appearance: none;
 }
-:host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button {
+:host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button {
   display: block;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/searchbar/searchbar.md.css CHANGED Viewed

@@ -126,7 +126,7 @@
   appearance: none;
 }
-:host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button {
+:host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button {
   display: block;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/segment-button/segment-button.ios.css CHANGED Viewed

@@ -164,6 +164,10 @@
   opacity: var(--background-focused-opacity);
 }
+:host(:focus) {
+  outline: none;
+}
 @media (any-hover: hover) {
   :host(:hover) .button-native {
     color: var(--color-hover);

package/dist/node_modules/@ionic/core/dist/collection/components/segment-button/segment-button.md.css CHANGED Viewed

@@ -164,6 +164,10 @@
   opacity: var(--background-focused-opacity);
 }
+:host(:focus) {
+  outline: none;
+}
 @media (any-hover: hover) {
   :host(:hover) .button-native {
     color: var(--color-hover);

package/dist/node_modules/@ionic/core/dist/collection/components/select/select.ios.css CHANGED Viewed

@@ -101,7 +101,6 @@ button {
 .select-icon {
   position: relative;
-  opacity: 0.33;
 }
 .select-text {
@@ -142,4 +141,5 @@ button {
 .select-icon {
   width: 12px;
   height: 18px;
+  opacity: 0.33;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/select/select.md.css CHANGED Viewed

@@ -101,7 +101,6 @@ button {
 .select-icon {
   position: relative;
-  opacity: 0.33;
 }
 .select-text {
@@ -142,8 +141,37 @@ button {
 .select-icon {
   width: 19px;
   height: 19px;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0.55;
 }
-:host-context(.item-label-floating) .select-icon {
+/**
+ * Adjust the arrow so that it appears in the middle
+ * of the item. If the item has fill="outline" then
+ * we should adjust the entire ion-select rather than
+ * just the outline so the selected value appears centered too.
+ */
+:host-context(.item-label-stacked) .select-icon,
+:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,
+:host-context(.item-label-floating.item-fill-outline) {
   transform: translate3d(0,  -9px,  0);
+}
+:host-context(.item-has-focus) .select-icon {
+  transform: rotate(180deg);
+}
+/**
+ * Ensure that the translation we did
+ * above is preserved when we rotate the select icon.
+ */
+:host-context(.item-has-focus.item-label-stacked) .select-icon,
+:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)) .select-icon {
+  transform: translate3d(0,  -9px,  0) rotate(180deg);
+}
+:host-context(ion-item.ion-focused) .select-icon,
+:host-context(.item-has-focus) .select-icon {
+  color: var(--highlight-color-focused);
+  opacity: 1;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/select-popover/{select-popover.css → select-popover.ios.css} RENAMED Viewed

@@ -1,12 +1,12 @@
 :host ion-list {
   margin-left: 0;
   margin-right: 0;
-  margin-top: -1px;
-  margin-bottom: -1px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
-:host ion-list-header,
-:host ion-label {
+ion-list-header,
+ion-label {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

package/dist/node_modules/@ionic/core/dist/collection/components/select-popover/select-popover.md.css ADDED Viewed

@@ -0,0 +1,37 @@
+:host ion-list {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+ion-list-header,
+ion-label {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+ion-list ion-radio {
+  opacity: 0;
+}
+ion-item {
+  --inner-border-width: 0;
+}
+.item-radio-checked {
+  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08);
+  --background-focused: var(--ion-color-primary, #3880ff);
+  --background-focused-opacity: 0.2;
+  --background-hover: var(--ion-color-primary, #3880ff);
+  --background-hover-opacity: 0.12;
+}
+.item-checkbox-checked {
+  --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
+  --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
+  --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
+  --color: var(--ion-color-primary, #3880ff);
+}

package/dist/node_modules/@ionic/core/dist/collection/components/skeleton-text/skeleton-text.css CHANGED Viewed

@@ -41,13 +41,13 @@ span {
   animation-timing-function: linear;
 }
-/* stylelint-disable property-blacklist */
+/* stylelint-disable property-disallowed-list */
 @keyframes shimmer {
   0% {
-    background-position: -468px 0;
+    background-position: -400px 0;
   }
   100% {
-    background-position: 468px 0;
+    background-position: 400px 0;
   }
 }
-/* stylelint-enable property-blacklist */
+/* stylelint-enable property-disallowed-list */

package/dist/node_modules/@ionic/core/dist/collection/components/spinner/spinner.css CHANGED Viewed

@@ -35,13 +35,26 @@ svg {
 :host(.spinner-lines) line,
 :host(.spinner-lines-small) line {
+  stroke-width: 7px;
+}
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
   stroke-width: 4px;
+}
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line,
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
   stroke-linecap: round;
   stroke: currentColor;
 }
 :host(.spinner-lines) svg,
-:host(.spinner-lines-small) svg {
+:host(.spinner-lines-small) svg,
+:host(.spinner-lines-sharp) svg,
+:host(.spinner-lines-sharp-small) svg {
   animation: spinner-fade-out 1s linear infinite;
 }
@@ -76,7 +89,7 @@ svg {
   animation: spinner-dots 1s linear infinite;
 }
-:host(.spinner-circular) {
+:host(.spinner-circular) svg {
   animation: spinner-circular linear infinite;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/tab-bar/tab-bar.ios.css CHANGED Viewed

@@ -61,6 +61,7 @@
 }
 :host([slot=top]) {
+  padding-top: var(--ion-safe-area-top, 0);
   padding-bottom: 0;
   border-top: 0;
   border-bottom: var(--border);
@@ -72,7 +73,7 @@
 }
 :host {
-  --background: var(--ion-tab-bar-background, var(--ion-background-color, #fff));
+  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7));
   --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
   --border: 0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));
   --color: var(--ion-tab-bar-color, var(--ion-color-step-400, #999999));

package/dist/node_modules/@ionic/core/dist/collection/components/tab-bar/tab-bar.md.css CHANGED Viewed

@@ -61,6 +61,7 @@
 }
 :host([slot=top]) {
+  padding-top: var(--ion-safe-area-top, 0);
   padding-bottom: 0;
   border-top: 0;
   border-bottom: var(--border);

package/dist/node_modules/@ionic/core/dist/collection/components/textarea/textarea.ios.css CHANGED Viewed

@@ -133,6 +133,15 @@
   right: 0;
 }
+:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
+  opacity: 0;
+}
+:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
+  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+}
 :host {
   --padding-top: 10px;
   --padding-end: 10px;

package/dist/node_modules/@ionic/core/dist/collection/components/textarea/textarea.md.css CHANGED Viewed

@@ -133,6 +133,15 @@
   right: 0;
 }
+:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
+  opacity: 0;
+}
+:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
+  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+}
 :host {
   --padding-top: 10px;
   --padding-end: 0;

package/dist/node_modules/@ionic/core/dist/collection/components/title/title.ios.css CHANGED Viewed

@@ -32,8 +32,8 @@
   top: 0;
   padding-left: 90px;
   padding-right: 90px;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
   position: absolute;
   width: 100%;
   height: 100%;
@@ -105,7 +105,8 @@
     padding-inline-end: 16px;
   }
 }
-:host-context([dir=rtl]):host(.title-large), :host-context([dir=rtl]).title-large {
+:host(.title-large.title-rtl) {
   transform-origin: right center;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/toast/toast.ios.css CHANGED Viewed

@@ -34,7 +34,7 @@
   --min-height: auto;
   --height: auto;
   --max-height: auto;
-  --white-space: pre-wrap;
+  --white-space: normal;
   left: 0;
   top: 0;
   display: block;
@@ -111,6 +111,17 @@
   justify-content: center;
 }
+.toast-icon {
+  margin-left: 16px;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .toast-icon {
+    margin-left: unset;
+    -webkit-margin-start: 16px;
+    margin-inline-start: 16px;
+  }
+}
 .toast-message {
   flex: 1;
   white-space: var(--white-space);
@@ -127,7 +138,8 @@
   z-index: 0;
 }
-.toast-icon {
+.toast-icon,
+.toast-button-icon {
   font-size: 1.4em;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/toast/toast.md.css CHANGED Viewed

@@ -34,7 +34,7 @@
   --min-height: auto;
   --height: auto;
   --max-height: auto;
-  --white-space: pre-wrap;
+  --white-space: normal;
   left: 0;
   top: 0;
   display: block;
@@ -111,6 +111,17 @@
   justify-content: center;
 }
+.toast-icon {
+  margin-left: 16px;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .toast-icon {
+    margin-left: unset;
+    -webkit-margin-start: 16px;
+    margin-inline-start: 16px;
+  }
+}
 .toast-message {
   flex: 1;
   white-space: var(--white-space);
@@ -127,7 +138,8 @@
   z-index: 0;
 }
-.toast-icon {
+.toast-icon,
+.toast-button-icon {
   font-size: 1.4em;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/toggle/toggle.ios.css CHANGED Viewed

@@ -53,6 +53,7 @@ label {
   display: flex;
   align-items: center;
   opacity: 0;
+  pointer-events: none;
 }
 [dir=rtl] label, :host-context([dir=rtl]) label {
   left: unset;

package/dist/node_modules/@ionic/core/dist/collection/components/toggle/toggle.md.css CHANGED Viewed

@@ -53,6 +53,7 @@ label {
   display: flex;
   align-items: center;
   opacity: 0;
+  pointer-events: none;
 }
 [dir=rtl] label, :host-context([dir=rtl]) label {
   left: unset;

package/dist/node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.ios.css CHANGED Viewed

@@ -20,6 +20,7 @@
   --border-width: 0;
   --border-style: solid;
   --opacity: 1;
+  --opacity-scale: 1;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   padding-left: var(--ion-safe-area-left);
@@ -92,7 +93,7 @@
   border-color: var(--border-color);
   background: var(--background);
   contain: strict;
-  opacity: var(--opacity);
+  opacity: calc(var(--opacity) * var(--opacity-scale));
   z-index: -1;
   pointer-events: none;
 }
@@ -105,7 +106,7 @@
 }
 :host {
-  --background: var(--ion-toolbar-background, var(--ion-color-step-50, #fff));
+  --background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #000));
   --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));
   --padding-top: 3px;

package/dist/node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.md.css CHANGED Viewed

@@ -20,6 +20,7 @@
   --border-width: 0;
   --border-style: solid;
   --opacity: 1;
+  --opacity-scale: 1;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   padding-left: var(--ion-safe-area-left);
@@ -92,7 +93,7 @@
   border-color: var(--border-color);
   background: var(--background);
   contain: strict;
-  opacity: var(--opacity);
+  opacity: calc(var(--opacity) * var(--opacity-scale));
   z-index: -1;
   pointer-events: none;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/virtual-scroll/virtual-scroll.css CHANGED Viewed

@@ -11,7 +11,7 @@ ion-virtual-scroll > .virtual-loading {
 }
 ion-virtual-scroll > .virtual-item {
-  /* stylelint-disable declaration-no-important, property-blacklist */
+  /* stylelint-disable declaration-no-important, property-disallowed-list */
   position: absolute !important;
   top: 0 !important;
   right: 0 !important;

package/dist/node_modules/@sparkle-learning/components/dist/collection/components/button/button.css ADDED Viewed

@@ -0,0 +1,49 @@
+sparkle-button {
+  background-color: rgba(var(--ion-color-sparkle-rgb), var(--bg-alpha, 0.06));
+  border-radius: 6px;
+  color: var(--accent-color);
+  display: inline-block;
+  font-weight: 600;
+  white-space: nowrap;box-shadow: 0 1px 3px rgba(0,0,0,.1);
+}
+sparkle-button a,
+sparkle-button button {
+  color: inherit;
+  display: inline-block;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0.75em 1.5em;
+}
+sparkle-button button {
+  appearance: none;
+  background: none;
+  border: none;
+  line-height: inherit;
+}
+sparkle-button svg {
+  fill: currentColor;
+  height: 1em;
+  margin-bottom: -0.125em;
+  width: 1em;
+}
+sparkle-button[round] {
+  border-radius: 2em;
+}
+sparkle-button[primary] {
+    background-color: rgba(var(--ion-color-sparkle-rgb));
+    color:var(--ion-color-sparkle-contrast);
+}
+@media (hover: hover) {
+  sparkle-button:hover {
+    --bg-alpha: 0.08;
+  }
+  sparkle-button:active {
+    --bg-alpha: 0.1;
+  }
+}