@joster-dev/chaos-control 0.1.0

package/src/lib/atomic.scss

@@ -0,0 +1,87 @@
+@import "./variables.scss";
+
+.d-flex {
+  display: flex;
+}
+
+.align-items-start {
+  align-items: flex-start;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.align-items-stretch {
+  align-items: stretch;
+}
+
+.justify-content-between {
+  justify-content: space-between;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-2 {
+  flex: 2;
+}
+
+.flex-3 {
+  flex: 3;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+.margin-right-1 {
+  margin-right: $md;
+}
+
+.margin-right-2 {
+  margin-right: $lg;
+}
+
+.margin-left-1 {
+  margin-left: $md;
+}
+
+.margin-left-2 {
+  margin-left: $lg;
+}
+
+.border-radius-right {
+  border-top-right-radius: $md;
+  border-bottom-right-radius: $md;
+}
+
+.border-radius-left {
+  border-top-left-radius: $md;
+  border-bottom-left-radius: $md;
+}
+
+.white-space-nowrap {
+  white-space: nowrap;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}

package/src/lib/styles.scss

@@ -0,0 +1,83 @@
+@import "./variables.scss";
+
+label {
+  display: block;
+  padding-bottom: $md;
+  font-weight: bold;
+
+  &:empty {
+    display: none;
+  }
+
+  &.required:after {
+    content: "*";
+  }
+}
+
+ul {
+  list-style: none;
+  // color: red;
+  margin: 0;
+  padding: 0;
+
+  >li {
+    padding-top: $sm;
+  }
+}
+
+a:not(.jo-ignore),
+button:not(.jo-ignore),
+.button,
+input,
+textarea {
+  color: inherit;
+  background: transparent;
+  border-width: 0.15em;
+  border-style: outset;
+  border-color: currentColor;
+  padding: $md;
+  margin: 0;
+  font-size: 1em;
+  // transition: all 700ms ease;
+  line-height: 1em;
+
+  &:active,
+  &.active {
+    border-style: inset;
+  }
+
+  &:disabled,
+  &.disabled {
+    cursor: not-allowed;
+    border-style: solid;
+    box-shadow: none;
+    opacity: 0.5;
+  }
+
+  &.invalid {
+    // animation: 3s ease 0s infinite invalid-border;
+  }
+
+  &:focus {
+    // outline: 0.15em solid transparent;
+    // box-shadow: 0 0 0.1em 0 currentColor;
+  }
+}
+
+a,
+button,
+.button {
+  cursor: pointer;
+}
+
+@keyframes invalid-border {
+
+  0%,
+  100% {
+    border-style: inset;
+  }
+
+  50% {
+    border-style: outset;
+  }
+}

package/src/lib/variables.scss

@@ -0,0 +1,3 @@
+$sm: 0.25em;
+$md: 0.5em;
+$lg: 1em;