@yoobic/yobi 8.3.0-8 → 8.3.1-0

package/dist/collection/components/2.molecules/modal/modal.css

@@ -506,6 +506,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: inherit;
 }
 
+:host(.half) {
+  --safe-area-inset-top: 0;
+}
 :host(.half) .modal-wrapper {
   border-radius: var(--border-radius-16, 1rem) var(--border-radius-16, 1rem) 0 0;
 }
@@ -697,4 +700,772 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.webpart.fullscreen) .modal-wrapper {
   max-width: 100%;
   max-height: 100%;
+}
+
+:host(.bg-accent) {
+  background: var(--accent, #276ef1);
+}
+
+:host(.accent) {
+  color: var(--accent, #276ef1);
+}
+
+:host(.bg-anthracite) {
+  background: var(--anthracite, #1a1a1a);
+}
+
+:host(.anthracite) {
+  color: var(--anthracite, #1a1a1a);
+}
+
+:host(.bg-app-color) {
+  background: var(--app-color, #5a30f4);
+}
+
+:host(.app-color) {
+  color: var(--app-color, #5a30f4);
+}
+
+:host(.bg-danger) {
+  background: var(--danger, #d44333);
+}
+
+:host(.danger) {
+  color: var(--danger, #d44333);
+}
+
+:host(.bg-dark) {
+  background: var(--dark, #000000);
+}
+
+:host(.dark) {
+  color: var(--dark, #000000);
+}
+
+:host(.bg-energized) {
+  background: var(--energized, #ffc043);
+}
+
+:host(.energized) {
+  color: var(--energized, #ffc043);
+}
+
+:host(.bg-info) {
+  background: var(--info, #d84c96);
+}
+
+:host(.info) {
+  color: var(--info, #d84c96);
+}
+
+:host(.bg-light) {
+  background: var(--light, #ffffff);
+}
+
+:host(.light) {
+  color: var(--light, #ffffff);
+}
+
+:host(.bg-stable) {
+  background: var(--stable, #adadad);
+}
+
+:host(.stable) {
+  color: var(--stable, #adadad);
+}
+
+:host(.bg-stable-alt) {
+  background: var(--stable-alt, #d0d0d0);
+}
+
+:host(.stable-alt) {
+  color: var(--stable-alt, #d0d0d0);
+}
+
+:host(.bg-stable-light) {
+  background: var(--stable-light, #f1f1f1);
+}
+
+:host(.stable-light) {
+  color: var(--stable-light, #f1f1f1);
+}
+
+:host(.bg-stable-ultralight) {
+  background: var(--stable-ultralight, #fafafa);
+}
+
+:host(.stable-ultralight) {
+  color: var(--stable-ultralight, #fafafa);
+}
+
+:host(.bg-success) {
+  background: var(--success, #3aa76d);
+}
+
+:host(.success) {
+  color: var(--success, #3aa76d);
+}
+
+:host(.bg-text-color) {
+  background: var(--text-color, #807f83);
+}
+
+:host(.text-color) {
+  color: var(--text-color, #807f83);
+}
+
+:host(.bg-warning) {
+  background: var(--warning, #ed6e33);
+}
+
+:host(.warning) {
+  color: var(--warning, #ed6e33);
+}
+
+:host(.bg-wood) {
+  background: var(--wood, #99644c);
+}
+
+:host(.wood) {
+  color: var(--wood, #99644c);
+}
+
+:host(.bg-accent-10) {
+  background: var(--accent-10, rgba(39, 110, 241, 0.1));
+}
+
+:host(.accent-10) {
+  color: var(--accent-10, rgba(39, 110, 241, 0.1));
+}
+
+:host(.bg-accent-20) {
+  background: var(--accent-20, rgba(39, 110, 241, 0.2));
+}
+
+:host(.accent-20) {
+  color: var(--accent-20, rgba(39, 110, 241, 0.2));
+}
+
+:host(.bg-accent-40) {
+  background: var(--accent-40, rgba(39, 110, 241, 0.4));
+}
+
+:host(.accent-40) {
+  color: var(--accent-40, rgba(39, 110, 241, 0.4));
+}
+
+:host(.bg-accent-60) {
+  background: var(--accent-60, rgba(39, 110, 241, 0.6));
+}
+
+:host(.accent-60) {
+  color: var(--accent-60, rgba(39, 110, 241, 0.6));
+}
+
+:host(.bg-accent-80) {
+  background: var(--accent-80, rgba(39, 110, 241, 0.8));
+}
+
+:host(.accent-80) {
+  color: var(--accent-80, rgba(39, 110, 241, 0.8));
+}
+
+:host(.bg-anthracite-10) {
+  background: var(--anthracite-10, rgba(26, 26, 26, 0.1));
+}
+
+:host(.anthracite-10) {
+  color: var(--anthracite-10, rgba(26, 26, 26, 0.1));
+}
+
+:host(.bg-anthracite-20) {
+  background: var(--anthracite-20, rgba(26, 26, 26, 0.2));
+}
+
+:host(.anthracite-20) {
+  color: var(--anthracite-20, rgba(26, 26, 26, 0.2));
+}
+
+:host(.bg-anthracite-40) {
+  background: var(--anthracite-40, rgba(26, 26, 26, 0.4));
+}
+
+:host(.anthracite-40) {
+  color: var(--anthracite-40, rgba(26, 26, 26, 0.4));
+}
+
+:host(.bg-anthracite-60) {
+  background: var(--anthracite-60, rgba(26, 26, 26, 0.6));
+}
+
+:host(.anthracite-60) {
+  color: var(--anthracite-60, rgba(26, 26, 26, 0.6));
+}
+
+:host(.bg-anthracite-80) {
+  background: var(--anthracite-80, rgba(26, 26, 26, 0.8));
+}
+
+:host(.anthracite-80) {
+  color: var(--anthracite-80, rgba(26, 26, 26, 0.8));
+}
+
+:host(.bg-app-color-10) {
+  background: var(--app-color-10, rgba(90, 48, 244, 0.1));
+}
+
+:host(.app-color-10) {
+  color: var(--app-color-10, rgba(90, 48, 244, 0.1));
+}
+
+:host(.bg-app-color-20) {
+  background: var(--app-color-20, rgba(90, 48, 244, 0.2));
+}
+
+:host(.app-color-20) {
+  color: var(--app-color-20, rgba(90, 48, 244, 0.2));
+}
+
+:host(.bg-app-color-40) {
+  background: var(--app-color-40, rgba(90, 48, 244, 0.4));
+}
+
+:host(.app-color-40) {
+  color: var(--app-color-40, rgba(90, 48, 244, 0.4));
+}
+
+:host(.bg-app-color-60) {
+  background: var(--app-color-60, rgba(90, 48, 244, 0.6));
+}
+
+:host(.app-color-60) {
+  color: var(--app-color-60, rgba(90, 48, 244, 0.6));
+}
+
+:host(.bg-app-color-80) {
+  background: var(--app-color-80, rgba(90, 48, 244, 0.8));
+}
+
+:host(.app-color-80) {
+  color: var(--app-color-80, rgba(90, 48, 244, 0.8));
+}
+
+:host(.bg-danger-10) {
+  background: var(--danger-10, rgba(212, 67, 51, 0.1));
+}
+
+:host(.danger-10) {
+  color: var(--danger-10, rgba(212, 67, 51, 0.1));
+}
+
+:host(.bg-danger-20) {
+  background: var(--danger-20, rgba(212, 67, 51, 0.2));
+}
+
+:host(.danger-20) {
+  color: var(--danger-20, rgba(212, 67, 51, 0.2));
+}
+
+:host(.bg-danger-40) {
+  background: var(--danger-40, rgba(212, 67, 51, 0.4));
+}
+
+:host(.danger-40) {
+  color: var(--danger-40, rgba(212, 67, 51, 0.4));
+}
+
+:host(.bg-danger-60) {
+  background: var(--danger-60, rgba(212, 67, 51, 0.6));
+}
+
+:host(.danger-60) {
+  color: var(--danger-60, rgba(212, 67, 51, 0.6));
+}
+
+:host(.bg-danger-80) {
+  background: var(--danger-80, rgba(212, 67, 51, 0.8));
+}
+
+:host(.danger-80) {
+  color: var(--danger-80, rgba(212, 67, 51, 0.8));
+}
+
+:host(.bg-dark-10) {
+  background: var(--dark-10, rgba(0, 0, 0, 0.1));
+}
+
+:host(.dark-10) {
+  color: var(--dark-10, rgba(0, 0, 0, 0.1));
+}
+
+:host(.bg-dark-20) {
+  background: var(--dark-20, rgba(0, 0, 0, 0.2));
+}
+
+:host(.dark-20) {
+  color: var(--dark-20, rgba(0, 0, 0, 0.2));
+}
+
+:host(.bg-dark-40) {
+  background: var(--dark-40, rgba(0, 0, 0, 0.4));
+}
+
+:host(.dark-40) {
+  color: var(--dark-40, rgba(0, 0, 0, 0.4));
+}
+
+:host(.bg-dark-60) {
+  background: var(--dark-60, rgba(0, 0, 0, 0.6));
+}
+
+:host(.dark-60) {
+  color: var(--dark-60, rgba(0, 0, 0, 0.6));
+}
+
+:host(.bg-dark-80) {
+  background: var(--dark-80, rgba(0, 0, 0, 0.8));
+}
+
+:host(.dark-80) {
+  color: var(--dark-80, rgba(0, 0, 0, 0.8));
+}
+
+:host(.bg-energized-10) {
+  background: var(--energized-10, rgba(255, 192, 67, 0.1));
+}
+
+:host(.energized-10) {
+  color: var(--energized-10, rgba(255, 192, 67, 0.1));
+}
+
+:host(.bg-energized-20) {
+  background: var(--energized-20, rgba(255, 192, 67, 0.2));
+}
+
+:host(.energized-20) {
+  color: var(--energized-20, rgba(255, 192, 67, 0.2));
+}
+
+:host(.bg-energized-40) {
+  background: var(--energized-40, rgba(255, 192, 67, 0.4));
+}
+
+:host(.energized-40) {
+  color: var(--energized-40, rgba(255, 192, 67, 0.4));
+}
+
+:host(.bg-energized-60) {
+  background: var(--energized-60, rgba(255, 192, 67, 0.6));
+}
+
+:host(.energized-60) {
+  color: var(--energized-60, rgba(255, 192, 67, 0.6));
+}
+
+:host(.bg-energized-80) {
+  background: var(--energized-80, rgba(255, 192, 67, 0.8));
+}
+
+:host(.energized-80) {
+  color: var(--energized-80, rgba(255, 192, 67, 0.8));
+}
+
+:host(.bg-info-10) {
+  background: var(--info-10, rgba(216, 76, 150, 0.1));
+}
+
+:host(.info-10) {
+  color: var(--info-10, rgba(216, 76, 150, 0.1));
+}
+
+:host(.bg-info-20) {
+  background: var(--info-20, rgba(216, 76, 150, 0.2));
+}
+
+:host(.info-20) {
+  color: var(--info-20, rgba(216, 76, 150, 0.2));
+}
+
+:host(.bg-info-40) {
+  background: var(--info-40, rgba(216, 76, 150, 0.4));
+}
+
+:host(.info-40) {
+  color: var(--info-40, rgba(216, 76, 150, 0.4));
+}
+
+:host(.bg-info-60) {
+  background: var(--info-60, rgba(216, 76, 150, 0.6));
+}
+
+:host(.info-60) {
+  color: var(--info-60, rgba(216, 76, 150, 0.6));
+}
+
+:host(.bg-info-80) {
+  background: var(--info-80, rgba(216, 76, 150, 0.8));
+}
+
+:host(.info-80) {
+  color: var(--info-80, rgba(216, 76, 150, 0.8));
+}
+
+:host(.bg-light-10) {
+  background: var(--light-10, rgba(255, 255, 255, 0.1));
+}
+
+:host(.light-10) {
+  color: var(--light-10, rgba(255, 255, 255, 0.1));
+}
+
+:host(.bg-light-20) {
+  background: var(--light-20, rgba(255, 255, 255, 0.2));
+}
+
+:host(.light-20) {
+  color: var(--light-20, rgba(255, 255, 255, 0.2));
+}
+
+:host(.bg-light-40) {
+  background: var(--light-40, rgba(255, 255, 255, 0.4));
+}
+
+:host(.light-40) {
+  color: var(--light-40, rgba(255, 255, 255, 0.4));
+}
+
+:host(.bg-light-60) {
+  background: var(--light-60, rgba(255, 255, 255, 0.6));
+}
+
+:host(.light-60) {
+  color: var(--light-60, rgba(255, 255, 255, 0.6));
+}
+
+:host(.bg-light-80) {
+  background: var(--light-80, rgba(255, 255, 255, 0.8));
+}
+
+:host(.light-80) {
+  color: var(--light-80, rgba(255, 255, 255, 0.8));
+}
+
+:host(.bg-stable-10) {
+  background: var(--stable-10, rgba(173, 173, 173, 0.1));
+}
+
+:host(.stable-10) {
+  color: var(--stable-10, rgba(173, 173, 173, 0.1));
+}
+
+:host(.bg-stable-20) {
+  background: var(--stable-20, rgba(173, 173, 173, 0.2));
+}
+
+:host(.stable-20) {
+  color: var(--stable-20, rgba(173, 173, 173, 0.2));
+}
+
+:host(.bg-stable-40) {
+  background: var(--stable-40, rgba(173, 173, 173, 0.4));
+}
+
+:host(.stable-40) {
+  color: var(--stable-40, rgba(173, 173, 173, 0.4));
+}
+
+:host(.bg-stable-60) {
+  background: var(--stable-60, rgba(173, 173, 173, 0.6));
+}
+
+:host(.stable-60) {
+  color: var(--stable-60, rgba(173, 173, 173, 0.6));
+}
+
+:host(.bg-stable-80) {
+  background: var(--stable-80, rgba(173, 173, 173, 0.8));
+}
+
+:host(.stable-80) {
+  color: var(--stable-80, rgba(173, 173, 173, 0.8));
+}
+
+:host(.bg-stable-alt-10) {
+  background: var(--stable-alt-10, rgba(208, 208, 208, 0.1));
+}
+
+:host(.stable-alt-10) {
+  color: var(--stable-alt-10, rgba(208, 208, 208, 0.1));
+}
+
+:host(.bg-stable-alt-20) {
+  background: var(--stable-alt-20, rgba(208, 208, 208, 0.2));
+}
+
+:host(.stable-alt-20) {
+  color: var(--stable-alt-20, rgba(208, 208, 208, 0.2));
+}
+
+:host(.bg-stable-alt-40) {
+  background: var(--stable-alt-40, rgba(208, 208, 208, 0.4));
+}
+
+:host(.stable-alt-40) {
+  color: var(--stable-alt-40, rgba(208, 208, 208, 0.4));
+}
+
+:host(.bg-stable-alt-60) {
+  background: var(--stable-alt-60, rgba(208, 208, 208, 0.6));
+}
+
+:host(.stable-alt-60) {
+  color: var(--stable-alt-60, rgba(208, 208, 208, 0.6));
+}
+
+:host(.bg-stable-alt-80) {
+  background: var(--stable-alt-80, rgba(208, 208, 208, 0.8));
+}
+
+:host(.stable-alt-80) {
+  color: var(--stable-alt-80, rgba(208, 208, 208, 0.8));
+}
+
+:host(.bg-stable-light-10) {
+  background: var(--stable-light-10, rgba(241, 241, 241, 0.1));
+}
+
+:host(.stable-light-10) {
+  color: var(--stable-light-10, rgba(241, 241, 241, 0.1));
+}
+
+:host(.bg-stable-light-20) {
+  background: var(--stable-light-20, rgba(241, 241, 241, 0.2));
+}
+
+:host(.stable-light-20) {
+  color: var(--stable-light-20, rgba(241, 241, 241, 0.2));
+}
+
+:host(.bg-stable-light-40) {
+  background: var(--stable-light-40, rgba(241, 241, 241, 0.4));
+}
+
+:host(.stable-light-40) {
+  color: var(--stable-light-40, rgba(241, 241, 241, 0.4));
+}
+
+:host(.bg-stable-light-60) {
+  background: var(--stable-light-60, rgba(241, 241, 241, 0.6));
+}
+
+:host(.stable-light-60) {
+  color: var(--stable-light-60, rgba(241, 241, 241, 0.6));
+}
+
+:host(.bg-stable-light-80) {
+  background: var(--stable-light-80, rgba(241, 241, 241, 0.8));
+}
+
+:host(.stable-light-80) {
+  color: var(--stable-light-80, rgba(241, 241, 241, 0.8));
+}
+
+:host(.bg-stable-ultralight-10) {
+  background: var(--stable-ultralight-10, rgba(250, 250, 250, 0.1));
+}
+
+:host(.stable-ultralight-10) {
+  color: var(--stable-ultralight-10, rgba(250, 250, 250, 0.1));
+}
+
+:host(.bg-stable-ultralight-20) {
+  background: var(--stable-ultralight-20, rgba(250, 250, 250, 0.2));
+}
+
+:host(.stable-ultralight-20) {
+  color: var(--stable-ultralight-20, rgba(250, 250, 250, 0.2));
+}
+
+:host(.bg-stable-ultralight-40) {
+  background: var(--stable-ultralight-40, rgba(250, 250, 250, 0.4));
+}
+
+:host(.stable-ultralight-40) {
+  color: var(--stable-ultralight-40, rgba(250, 250, 250, 0.4));
+}
+
+:host(.bg-stable-ultralight-60) {
+  background: var(--stable-ultralight-60, rgba(250, 250, 250, 0.6));
+}
+
+:host(.stable-ultralight-60) {
+  color: var(--stable-ultralight-60, rgba(250, 250, 250, 0.6));
+}
+
+:host(.bg-stable-ultralight-80) {
+  background: var(--stable-ultralight-80, rgba(250, 250, 250, 0.8));
+}
+
+:host(.stable-ultralight-80) {
+  color: var(--stable-ultralight-80, rgba(250, 250, 250, 0.8));
+}
+
+:host(.bg-success-10) {
+  background: var(--success-10, rgba(58, 167, 109, 0.1));
+}
+
+:host(.success-10) {
+  color: var(--success-10, rgba(58, 167, 109, 0.1));
+}
+
+:host(.bg-success-20) {
+  background: var(--success-20, rgba(58, 167, 109, 0.2));
+}
+
+:host(.success-20) {
+  color: var(--success-20, rgba(58, 167, 109, 0.2));
+}
+
+:host(.bg-success-40) {
+  background: var(--success-40, rgba(58, 167, 109, 0.4));
+}
+
+:host(.success-40) {
+  color: var(--success-40, rgba(58, 167, 109, 0.4));
+}
+
+:host(.bg-success-60) {
+  background: var(--success-60, rgba(58, 167, 109, 0.6));
+}
+
+:host(.success-60) {
+  color: var(--success-60, rgba(58, 167, 109, 0.6));
+}
+
+:host(.bg-success-80) {
+  background: var(--success-80, rgba(58, 167, 109, 0.8));
+}
+
+:host(.success-80) {
+  color: var(--success-80, rgba(58, 167, 109, 0.8));
+}
+
+:host(.bg-text-color-10) {
+  background: var(--text-color-10, rgba(128, 127, 131, 0.1));
+}
+
+:host(.text-color-10) {
+  color: var(--text-color-10, rgba(128, 127, 131, 0.1));
+}
+
+:host(.bg-text-color-20) {
+  background: var(--text-color-20, rgba(128, 127, 131, 0.2));
+}
+
+:host(.text-color-20) {
+  color: var(--text-color-20, rgba(128, 127, 131, 0.2));
+}
+
+:host(.bg-text-color-40) {
+  background: var(--text-color-40, rgba(128, 127, 131, 0.4));
+}
+
+:host(.text-color-40) {
+  color: var(--text-color-40, rgba(128, 127, 131, 0.4));
+}
+
+:host(.bg-text-color-60) {
+  background: var(--text-color-60, rgba(128, 127, 131, 0.6));
+}
+
+:host(.text-color-60) {
+  color: var(--text-color-60, rgba(128, 127, 131, 0.6));
+}
+
+:host(.bg-text-color-80) {
+  background: var(--text-color-80, rgba(128, 127, 131, 0.8));
+}
+
+:host(.text-color-80) {
+  color: var(--text-color-80, rgba(128, 127, 131, 0.8));
+}
+
+:host(.bg-warning-10) {
+  background: var(--warning-10, rgba(237, 110, 51, 0.1));
+}
+
+:host(.warning-10) {
+  color: var(--warning-10, rgba(237, 110, 51, 0.1));
+}
+
+:host(.bg-warning-20) {
+  background: var(--warning-20, rgba(237, 110, 51, 0.2));
+}
+
+:host(.warning-20) {
+  color: var(--warning-20, rgba(237, 110, 51, 0.2));
+}
+
+:host(.bg-warning-40) {
+  background: var(--warning-40, rgba(237, 110, 51, 0.4));
+}
+
+:host(.warning-40) {
+  color: var(--warning-40, rgba(237, 110, 51, 0.4));
+}
+
+:host(.bg-warning-60) {
+  background: var(--warning-60, rgba(237, 110, 51, 0.6));
+}
+
+:host(.warning-60) {
+  color: var(--warning-60, rgba(237, 110, 51, 0.6));
+}
+
+:host(.bg-warning-80) {
+  background: var(--warning-80, rgba(237, 110, 51, 0.8));
+}
+
+:host(.warning-80) {
+  color: var(--warning-80, rgba(237, 110, 51, 0.8));
+}
+
+:host(.bg-wood-10) {
+  background: var(--wood-10, rgba(153, 100, 76, 0.1));
+}
+
+:host(.wood-10) {
+  color: var(--wood-10, rgba(153, 100, 76, 0.1));
+}
+
+:host(.bg-wood-20) {
+  background: var(--wood-20, rgba(153, 100, 76, 0.2));
+}
+
+:host(.wood-20) {
+  color: var(--wood-20, rgba(153, 100, 76, 0.2));
+}
+
+:host(.bg-wood-40) {
+  background: var(--wood-40, rgba(153, 100, 76, 0.4));
+}
+
+:host(.wood-40) {
+  color: var(--wood-40, rgba(153, 100, 76, 0.4));
+}
+
+:host(.bg-wood-60) {
+  background: var(--wood-60, rgba(153, 100, 76, 0.6));
+}
+
+:host(.wood-60) {
+  color: var(--wood-60, rgba(153, 100, 76, 0.6));
+}
+
+:host(.bg-wood-80) {
+  background: var(--wood-80, rgba(153, 100, 76, 0.8));
+}
+
+:host(.wood-80) {
+  color: var(--wood-80, rgba(153, 100, 76, 0.8));
 }