@fpkit/acss 0.4.4

package/src/styles/form/form.css

@@ -0,0 +1,93 @@
+:root {
+  --input-border-color: gray;
+  --input-appearance: none;
+  --input-bg: inherit;
+  --input-border: none;
+  --input-outline: thin solid var(--input-border-color);
+  --input-px: 0.6rem;
+  --input-py: 0.4rem;
+  --input-radius: --var(--radius);
+  --input-fs: var(--fs);
+  --input-w: clamp(200px, 100%, 500px);
+  --placeholder-color: gray;
+  --placeholder-style: italic;
+  --placeholder-fs: smaller;
+  --form-direction: column;
+  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polyline points='6,9 10,13 14,9' stroke='%23000000' stroke-width='1.5' fill='none' /></svg>");
+}
+
+form {
+  display: flex;
+  flex-direction: var(--form-direction);
+  gap: 1rem;
+}
+form > div {
+  display: flex;
+  gap: 1rem;
+  flex-direction: var(--form-direction);
+}
+form label {
+  display: block;
+}
+
+input[type]:not([type=checkbox], [type=radio]),
+textarea,
+select {
+  -webkit-appearance: var(--input-appearance);
+  -moz-appearance: var(--input-appearance);
+  appearance: var(--input-appearance);
+  width: var(--input-w);
+  border: var(--input-border);
+  outline: var(--input-outline);
+  padding-inline: var(--input-px);
+  padding-block: var(--input-py);
+  border-radius: var(--input-radius);
+  background-color: var(--input-bg, #fff);
+}
+input[type]:not([type=checkbox], [type=radio])::placeholder,
+textarea::placeholder,
+select::placeholder {
+  color: var(--placeholder-color);
+  font-style: var(--placeholder-style);
+  font-size: var(--placeholder-fs);
+  text-transform: capitalize;
+}
+input[type]:not([type=checkbox], [type=radio]):focus-visible, input[type]:not([type=checkbox], [type=radio]):focus,
+textarea:focus-visible,
+textarea:focus,
+select:focus-visible,
+select:focus {
+  outline-width: medium;
+}
+input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder,
+textarea[aria-required=true]::placeholder,
+select[aria-required=true]::placeholder {
+  color: var(--color-required, var(--placeholder-color));
+  font-weight: 600;
+}
+input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder::after,
+textarea[aria-required=true]::placeholder::after,
+select[aria-required=true]::placeholder::after {
+  content: "* ";
+}
+input[type]:not([type=checkbox], [type=radio])[aria-disabled=true],
+textarea[aria-disabled=true],
+select[aria-disabled=true] {
+  --input-border-color: lightgray;
+  cursor: not-allowed;
+  text-transform: capitalize;
+  text-decoration: line-through;
+}
+
+select {
+  border: var(--input-outline);
+  outline: none;
+  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
+  -moz-appearance: none; /* Remove default arrow in Firefox */
+  appearance: none; /* Remove default arrow in other browsers */
+  background: var(--select-arrow) no-repeat;
+  background-position: right 0.5rem top 50%;
+  padding-inline-end: 0;
+}
+
+/*# sourceMappingURL=form.css.map */

package/src/styles/form/form.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/form/form.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;AAKA;AAAA;AAAA;EACE;EACA;;AACA;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"form.css"}

package/src/styles/form/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"style.css"}

package/src/styles/icons/icon.css

@@ -0,0 +1,16 @@
+[data-icon] {
+  --icon-display: inline-flex;
+  --icon-direction: row;
+  --icons-placement: center;
+  --icon-width: max-content;
+  --icon-gap: 0.2rem;
+  --icon-height: max-content;
+  display: var(--icon-display);
+  flex-direction: var(--icon-direction);
+  gap: var(--icon-gap);
+  place-items: var(--icons-placement);
+  width: var(--icon-width);
+  height: var(--icon-height);
+}
+
+/*# sourceMappingURL=icon.css.map */

package/src/styles/icons/icon.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/icons/icon.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA","file":"icon.css"}

package/src/styles/images/img.css

@@ -0,0 +1,42 @@
+img[alt] {
+  --img-max-width: 100%;
+  --img-height: auto;
+  --img-object-fit: cover;
+  --img-object-position: center;
+  --img-aspect-ratio: auto 2/3;
+  --img-display: inline-block;
+  max-width: var(--img-max-width);
+  max-inline-size: var(--img-max-width);
+  block-size: var(--img-height);
+  object-fit: var(--img-object-fit);
+  object-position: var(--img-object-position);
+  aspect-ratio: var(--img-aspect-ratio);
+  display: var(--img-display);
+  vertical-align: middle;
+  font-style: italic;
+  background-size: cover;
+  background-repeat: no-repeat;
+  shape-margin: var(--spc-3);
+}
+
+figure:has(img[alt]) {
+  --fig-display: flex;
+  --fig-p: 0.5rem;
+  --fig-bg: rgba(245, 245, 245, 0.683);
+  --fig-w: fit-content;
+  display: var(--fig-display);
+  position: relative;
+  padding: var(--fig-p);
+  background-color: var(--fig-bg);
+  max-width: var(--fig-w);
+}
+figure:has(img[alt]) > figcaption {
+  position: absolute;
+  bottom: var(--fig-bottom, var(--fig-p));
+  left: var(--fig-left, var(--fig-p));
+  right: var(--fig-right, var(--fig-p));
+  padding: var(--caption-p, var(--spc-3));
+  background-color: var(--fig-bg);
+}
+
+/*# sourceMappingURL=img.css.map */

package/src/styles/images/img.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/images/img.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA","file":"img.css"}