@haiilo/catalyst 0.1.1 → 0.2.0

package/dist/collection/components/cat-button/cat-button.css

@@ -0,0 +1,319 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: middle;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.cat-button {
+  font: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 0.25rem;
+  text-decoration: none;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear;
+}
+.cat-button:focus-visible {
+  outline: 2px solid #0071ff;
+  outline-offset: 1px;
+}
+
+.cat-button-content {
+  flex: 1 1 auto;
+  text-align: center;
+}
+.cat-button-ellipsed .cat-button-content {
+  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
+}
+
+.cat-button-disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+  filter: grayscale(100%);
+}
+
+.cat-button-round {
+  border-radius: 10rem;
+}
+
+.cat-button-loading {
+  cursor: default;
+}
+.cat-button-loading cat-spinner {
+  position: absolute;
+}
+.cat-button-loading > *:not(cat-spinner) {
+  visibility: hidden;
+}
+
+.cat-button-filled {
+  background-color: rgb(var(--bg));
+  color: rgb(var(--fill));
+  font-weight: 600;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: greyscale;
+}
+
+.cat-button-outlined {
+  background-color: white;
+  box-shadow: inset 0 0 0 1px rgba(var(--base), 0.2);
+  color: rgb(var(--text));
+}
+.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading) {
+  background-color: rgba(var(--base), 0.05);
+}
+.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading) {
+  background-color: rgba(var(--base), 0.1);
+}
+
+.cat-button-text {
+  background-color: transparent;
+  color: rgb(var(--text));
+  text-decoration: none;
+}
+.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading) {
+  text-decoration: underline;
+}
+
+.cat-button-primary {
+  --bg: var(--cat-primary-bg, 32, 127, 138);
+  --fill: var(--cat-primary-fill, 255, 255, 255);
+  --text: var(--cat-primary-text, 32, 127, 138);
+  --base: var(--cat-primary-text, 32, 127, 138);
+}
+.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: var(--cat-primary-bg-hover, 28, 112, 122);
+  --fill: var(--cat-primary-fill-hover, 255, 255, 255);
+  --text: var(--cat-primary-text-hover, 28, 112, 122);
+}
+.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: var(--cat-primary-bg-active, 25, 101, 110);
+  --fill: var(--cat-primary-fill-active, 255, 255, 255);
+  --text: var(--cat-primary-text-active, 25, 101, 110);
+}
+
+.cat-button-secondary {
+  --bg: 105, 118, 135;
+  --fill: 255, 255, 255;
+  --text: 0, 0, 0;
+  --base: 105, 118, 135;
+}
+.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: 105, 118, 135;
+  --fill: 255, 255, 255;
+  --text: 0, 0, 0;
+}
+.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: 105, 118, 135;
+  --fill: 255, 255, 255;
+  --text: 0, 0, 0;
+}
+
+.cat-button-success {
+  --bg: 0, 132, 88;
+  --fill: 255, 255, 255;
+  --text: 0, 132, 88;
+  --base: 0, 132, 88;
+}
+.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: 0, 117, 78;
+  --fill: 255, 255, 255;
+  --text: 0, 117, 78;
+}
+.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: 0, 105, 70;
+  --fill: 255, 255, 255;
+  --text: 0, 105, 70;
+}
+
+.cat-button-warning {
+  --bg: 255, 206, 128;
+  --fill: 0, 0, 0;
+  --text: 159, 97, 0;
+  --base: 159, 97, 0;
+}
+.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: 255, 214, 148;
+  --fill: 0, 0, 0;
+  --text: 159, 97, 0;
+}
+.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: 255, 222, 168;
+  --fill: 0, 0, 0;
+  --text: 159, 97, 0;
+}
+
+.cat-button-danger {
+  --bg: 217, 52, 13;
+  --fill: 255, 255, 255;
+  --text: 217, 52, 13;
+  --base: 217, 52, 13;
+}
+.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: 194, 46, 11;
+  --fill: 255, 255, 255;
+  --text: 194, 46, 11;
+}
+.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading) {
+  --bg: 174, 42, 10;
+  --fill: 255, 255, 255;
+  --text: 174, 42, 10;
+}
+
+.cat-button-xs {
+  min-width: 1.5rem;
+  padding: 0.25rem 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+}
+.cat-button-xs .cat-button-prefix {
+  margin-right: 0.25rem;
+}
+.cat-button-xs .cat-button-suffix {
+  margin-left: 0.25rem;
+}
+.cat-button-xs.cat-button-icon {
+  width: 1.5rem;
+  padding-left: 0;
+  padding-right: 0;
+}
+:host-context(nav) .cat-button-xs {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.cat-button-s {
+  min-width: 2rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+}
+.cat-button-s .cat-button-prefix {
+  margin-right: 0.25rem;
+}
+.cat-button-s .cat-button-suffix {
+  margin-left: 0.25rem;
+}
+.cat-button-s cat-icon {
+  margin-top: -0.125rem;
+  margin-bottom: -0.125rem;
+}
+.cat-button-s.cat-button-icon {
+  width: 2rem;
+  padding-left: 0;
+  padding-right: 0;
+}
+:host-context(nav) .cat-button-s {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.cat-button-m {
+  min-width: 2.5rem;
+  padding: 0.625rem 0.75rem;
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+}
+.cat-button-m .cat-button-prefix {
+  margin-right: 0.25rem;
+}
+.cat-button-m .cat-button-suffix {
+  margin-left: 0.25rem;
+}
+.cat-button-m cat-icon {
+  margin-top: -0.125rem;
+  margin-bottom: -0.125rem;
+}
+.cat-button-m.cat-button-icon {
+  width: 2.5rem;
+  padding-left: 0;
+  padding-right: 0;
+}
+:host-context(nav) .cat-button-m {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.cat-button-l {
+  min-width: 3rem;
+  padding: 0.875rem 1rem;
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+}
+.cat-button-l .cat-button-prefix {
+  margin-right: 0.25rem;
+}
+.cat-button-l .cat-button-suffix {
+  margin-left: 0.25rem;
+}
+.cat-button-l cat-icon {
+  margin-top: -0.125rem;
+  margin-bottom: -0.125rem;
+}
+.cat-button-l.cat-button-icon {
+  width: 3rem;
+  padding-left: 0;
+  padding-right: 0;
+}
+:host-context(nav) .cat-button-l {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.cat-button-xl {
+  min-width: 3.5rem;
+  padding: 1rem 1.25rem;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+.cat-button-xl .cat-button-prefix {
+  margin-right: 0.25rem;
+}
+.cat-button-xl .cat-button-suffix {
+  margin-left: 0.25rem;
+}
+.cat-button-xl.cat-button-icon {
+  width: 3.5rem;
+  padding-left: 0;
+  padding-right: 0;
+}
+:host-context(nav) .cat-button-xl {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+:host-context(nav) {
+  width: 100%;
+}
+:host-context(nav) .cat-button {
+  box-shadow: none;
+  border-radius: 0;
+}
+:host-context(nav) .cat-button:focus-visible {
+  outline-offset: -2px;
+}
+:host-context(nav) .cat-button-content {
+  text-align: left;
+}