@shift-css/core 0.4.0 → 0.6.0

package/dist/utils/layout.css

@@ -0,0 +1,338 @@
+[s-flex] {
+  display: flex;
+}
+
+[s-flex="row"] {
+  flex-direction: row;
+  display: flex;
+}
+
+[s-flex="col"] {
+  flex-direction: column;
+  display: flex;
+}
+
+[s-flex="row-reverse"] {
+  flex-direction: row-reverse;
+  display: flex;
+}
+
+[s-flex="col-reverse"] {
+  flex-direction: column-reverse;
+  display: flex;
+}
+
+[s-flex="center"] {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+[s-flex="stack"] {
+  flex-direction: column;
+  display: flex;
+}
+
+[s-flex="between"] {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+[s-flex="end"] {
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+[s-flex~="wrap"] {
+  flex-wrap: wrap;
+}
+
+[s-flex~="nowrap"] {
+  flex-wrap: nowrap;
+}
+
+[s-justify="start"] {
+  justify-content: flex-start;
+}
+
+[s-justify="end"] {
+  justify-content: flex-end;
+}
+
+[s-justify="center"] {
+  justify-content: center;
+}
+
+[s-justify="between"] {
+  justify-content: space-between;
+}
+
+[s-justify="around"] {
+  justify-content: space-around;
+}
+
+[s-justify="evenly"] {
+  justify-content: space-evenly;
+}
+
+[s-items="start"] {
+  align-items: flex-start;
+}
+
+[s-items="end"] {
+  align-items: flex-end;
+}
+
+[s-items="center"] {
+  align-items: center;
+}
+
+[s-items="baseline"] {
+  align-items: baseline;
+}
+
+[s-items="stretch"] {
+  align-items: stretch;
+}
+
+[s-content="start"] {
+  align-content: flex-start;
+}
+
+[s-content="end"] {
+  align-content: flex-end;
+}
+
+[s-content="center"] {
+  align-content: center;
+}
+
+[s-content="between"] {
+  align-content: space-between;
+}
+
+[s-content="around"] {
+  align-content: space-around;
+}
+
+[s-grid] {
+  display: grid;
+}
+
+[s-grid="1"] {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="3"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="4"] {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="5"] {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="6"] {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="12"] {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="auto-fit"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  display: grid;
+}
+
+[s-grid="auto-fill"] {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  display: grid;
+}
+
+[s-grid-rows="1"] {
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+
+[s-grid-rows="2"] {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+[s-grid-rows="3"] {
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
+[s-grid-rows="4"] {
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+}
+
+[s-col-span="1"] {
+  grid-column: span 1 / span 1;
+}
+
+[s-col-span="2"] {
+  grid-column: span 2 / span 2;
+}
+
+[s-col-span="3"] {
+  grid-column: span 3 / span 3;
+}
+
+[s-col-span="4"] {
+  grid-column: span 4 / span 4;
+}
+
+[s-col-span="6"] {
+  grid-column: span 6 / span 6;
+}
+
+[s-col-span="12"] {
+  grid-column: span 12 / span 12;
+}
+
+[s-col-span="full"] {
+  grid-column: 1 / -1;
+}
+
+[s-row-span="1"] {
+  grid-row: span 1 / span 1;
+}
+
+[s-row-span="2"] {
+  grid-row: span 2 / span 2;
+}
+
+[s-row-span="3"] {
+  grid-row: span 3 / span 3;
+}
+
+[s-row-span="full"] {
+  grid-row: 1 / -1;
+}
+
+[s-gap] {
+  gap: var(--s-space-4);
+}
+
+[s-gap="xs"] {
+  gap: var(--s-space-1);
+}
+
+[s-gap="sm"] {
+  gap: var(--s-space-2);
+}
+
+[s-gap="md"] {
+  gap: var(--s-space-4);
+}
+
+[s-gap="lg"] {
+  gap: var(--s-space-6);
+}
+
+[s-gap="xl"] {
+  gap: var(--s-space-8);
+}
+
+[s-gap="none"] {
+  gap: 0;
+}
+
+[s-container] {
+  width: 100%;
+  padding-inline: var(--s-space-4);
+  max-width: var(--s-container-max, 80rem);
+  margin-inline: auto;
+}
+
+[s-container="sm"] {
+  max-width: 40rem;
+}
+
+[s-container="md"] {
+  max-width: 48rem;
+}
+
+[s-container="lg"] {
+  max-width: 64rem;
+}
+
+[s-container="xl"] {
+  max-width: 80rem;
+}
+
+[s-container="full"] {
+  max-width: 100%;
+}
+
+[s-container="prose"] {
+  max-width: 65ch;
+}
+
+[s-position="static"] {
+  position: static;
+}
+
+[s-position="relative"] {
+  position: relative;
+}
+
+[s-position="absolute"] {
+  position: absolute;
+}
+
+[s-position="fixed"] {
+  position: fixed;
+}
+
+[s-position="sticky"] {
+  position: sticky;
+}
+
+[s-inset="0"] {
+  inset: 0;
+}
+
+[s-inset="auto"] {
+  inset: auto;
+}
+
+[s-display="block"] {
+  display: block;
+}
+
+[s-display="inline"] {
+  display: inline;
+}
+
+[s-display="inline-block"] {
+  display: inline-block;
+}
+
+[s-display="contents"] {
+  display: contents;
+}
+
+[s-display="inline-flex"] {
+  display: inline-flex;
+}
+
+[s-display="inline-grid"] {
+  display: inline-grid;
+}