feat: notification component

picocss · May 29, 2024 · c1b55d8 · c1b55d8
1 parent 6dc6489
commit c1b55d8
Show file tree

Hide file tree

Showing 239 changed files with 4,883 additions and 118 deletions.
diff --git a/css/pico.amber.css b/css/pico.amber.css
@@ -2747,6 +2747,46 @@ progress::-moz-progress-bar {
   }
 }
 
+/**
+ * Notification (<dialog>)
+ */
+dialog[role=alert] {
+  position: fixed;
+  top: unset;
+  right: var(--pico-spacing);
+  bottom: var(--pico-spacing);
+  left: unset;
+  width: auto;
+  min-width: unset;
+  height: auto;
+  min-height: unset;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  background-color: var(--pico-primary-background);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-primary-inverse);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  opacity: 0;
+  transition: opacity var(--pico-transition);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+dialog[data-backdrop=false][role=alert]::backdrop {
+  display: none;
+}
+
+dialog[role=alert][open] {
+  opacity: 1;
+  transition: opacity var(--pico-transition);
+}
+
 /**
  * Accessibility & User interaction
  */

diff --git a/css/pico.amber.min.css b/css/pico.amber.min.css
diff --git a/css/pico.blue.css b/css/pico.blue.css
@@ -2747,6 +2747,46 @@ progress::-moz-progress-bar {
   }
 }
 
+/**
+ * Notification (<dialog>)
+ */
+dialog[role=alert] {
+  position: fixed;
+  top: unset;
+  right: var(--pico-spacing);
+  bottom: var(--pico-spacing);
+  left: unset;
+  width: auto;
+  min-width: unset;
+  height: auto;
+  min-height: unset;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  background-color: var(--pico-primary-background);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-primary-inverse);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  opacity: 0;
+  transition: opacity var(--pico-transition);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+dialog[data-backdrop=false][role=alert]::backdrop {
+  display: none;
+}
+
+dialog[role=alert][open] {
+  opacity: 1;
+  transition: opacity var(--pico-transition);
+}
+
 /**
  * Accessibility & User interaction
  */

diff --git a/css/pico.blue.min.css b/css/pico.blue.min.css
diff --git a/css/pico.classless.amber.css b/css/pico.classless.amber.css
@@ -2376,6 +2376,46 @@ progress::-moz-progress-bar {
   }
 }
 
+/**
+ * Notification (<dialog>)
+ */
+dialog[role=alert] {
+  position: fixed;
+  top: unset;
+  right: var(--pico-spacing);
+  bottom: var(--pico-spacing);
+  left: unset;
+  width: auto;
+  min-width: unset;
+  height: auto;
+  min-height: unset;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  background-color: var(--pico-primary-background);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-primary-inverse);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  opacity: 0;
+  transition: opacity var(--pico-transition);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+dialog[data-backdrop=false][role=alert]::backdrop {
+  display: none;
+}
+
+dialog[role=alert][open] {
+  opacity: 1;
+  transition: opacity var(--pico-transition);
+}
+
 /**
  * Accessibility & User interaction
  */

diff --git a/css/pico.classless.amber.min.css b/css/pico.classless.amber.min.css
diff --git a/css/pico.classless.blue.css b/css/pico.classless.blue.css
@@ -2376,6 +2376,46 @@ progress::-moz-progress-bar {
   }
 }
 
+/**
+ * Notification (<dialog>)
+ */
+dialog[role=alert] {
+  position: fixed;
+  top: unset;
+  right: var(--pico-spacing);
+  bottom: var(--pico-spacing);
+  left: unset;
+  width: auto;
+  min-width: unset;
+  height: auto;
+  min-height: unset;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  background-color: var(--pico-primary-background);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-primary-inverse);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  opacity: 0;
+  transition: opacity var(--pico-transition);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+dialog[data-backdrop=false][role=alert]::backdrop {
+  display: none;
+}
+
+dialog[role=alert][open] {
+  opacity: 1;
+  transition: opacity var(--pico-transition);
+}
+
 /**
  * Accessibility & User interaction
  */

diff --git a/css/pico.classless.blue.min.css b/css/pico.classless.blue.min.css
diff --git a/css/pico.classless.conditional.amber.css b/css/pico.classless.conditional.amber.css
@@ -2376,6 +2376,46 @@ main {
   }
 }
 
+/**
+ * Notification (<dialog>)
+ */
+dialog[role=alert] {
+  position: fixed;
+  top: unset;
+  right: var(--pico-spacing);
+  bottom: var(--pico-spacing);
+  left: unset;
+  width: auto;
+  min-width: unset;
+  height: auto;
+  min-height: unset;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  background-color: var(--pico-primary-background);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-primary-inverse);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  opacity: 0;
+  transition: opacity var(--pico-transition);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+dialog[data-backdrop=false][role=alert]::backdrop {
+  display: none;
+}
+
+dialog[role=alert][open] {
+  opacity: 1;
+  transition: opacity var(--pico-transition);
+}
+
 /**
  * Accessibility & User interaction
  */

diff --git a/css/pico.classless.conditional.amber.min.css b/css/pico.classless.conditional.amber.min.css
diff --git a/css/pico.classless.conditional.blue.css b/css/pico.classless.conditional.blue.css
@@ -2376,6 +2376,46 @@ main {
   }
 }
 
+/**
+ * Notification (<dialog>)
+ */
+dialog[role=alert] {
+  position: fixed;
+  top: unset;
+  right: var(--pico-spacing);
+  bottom: var(--pico-spacing);
+  left: unset;
+  width: auto;
+  min-width: unset;
+  height: auto;
+  min-height: unset;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  background-color: var(--pico-primary-background);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-primary-inverse);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  opacity: 0;
+  transition: opacity var(--pico-transition);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+dialog[data-backdrop=false][role=alert]::backdrop {
+  display: none;
+}
+
+dialog[role=alert][open] {
+  opacity: 1;
+  transition: opacity var(--pico-transition);
+}
+
 /**
  * Accessibility & User interaction
  */

diff --git a/css/pico.classless.conditional.blue.min.css b/css/pico.classless.conditional.blue.min.css
diff --git a/css/pico.classless.conditional.cyan.css b/css/pico.classless.conditional.cyan.css
@@ -2376,6 +2376,46 @@ main {
   }
 }
 
+/**
+ * Notification (<dialog>)
+ */
+dialog[role=alert] {
+  position: fixed;
+  top: unset;
+  right: var(--pico-spacing);
+  bottom: var(--pico-spacing);
+  left: unset;
+  width: auto;
+  min-width: unset;
+  height: auto;
+  min-height: unset;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  background-color: var(--pico-primary-background);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-primary-inverse);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  opacity: 0;
+  transition: opacity var(--pico-transition);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+dialog[data-backdrop=false][role=alert]::backdrop {
+  display: none;
+}
+
+dialog[role=alert][open] {
+  opacity: 1;
+  transition: opacity var(--pico-transition);
+}
+
 /**
  * Accessibility & User interaction
  */

diff --git a/css/pico.classless.conditional.cyan.min.css b/css/pico.classless.conditional.cyan.min.css
diff --git a/css/pico.classless.conditional.fuchsia.css b/css/pico.classless.conditional.fuchsia.css
@@ -2376,6 +2376,46 @@ main {
   }
 }
 
+/**
+ * Notification (<dialog>)
+ */
+dialog[role=alert] {
+  position: fixed;
+  top: unset;
+  right: var(--pico-spacing);
+  bottom: var(--pico-spacing);
+  left: unset;
+  width: auto;
+  min-width: unset;
+  height: auto;
+  min-height: unset;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
+  background-color: var(--pico-primary-background);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-primary-inverse);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  opacity: 0;
+  transition: opacity var(--pico-transition);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+dialog[data-backdrop=false][role=alert]::backdrop {
+  display: none;
+}
+
+dialog[role=alert][open] {
+  opacity: 1;
+  transition: opacity var(--pico-transition);
+}
+
 /**
  * Accessibility & User interaction
  */

diff --git a/css/pico.classless.conditional.fuchsia.min.css b/css/pico.classless.conditional.fuchsia.min.css