@haiilo/catalyst 0.5.0 → 0.5.4

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

@@ -1,333 +0,0 @@
-/**
- * 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 {
-  position: relative;
-  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 rgb(var(--cat-border-color-focus, 0, 113, 255));
-  outline-offset: 1px;
-}
-
-.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;
-}
-
-.cat-button-active::before {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0.25rem;
-  height: 100%;
-  background: rgb(var(--base));
-}
-
-:host-context(nav) {
-  width: 100%;
-}
-:host-context(nav) .cat-button {
-  box-shadow: none;
-  border-radius: 0;
-  justify-content: left;
-}
-:host-context(nav) .cat-button:focus-visible {
-  outline-offset: -2px;
-}
-
-:host(.cat-text-left) .cat-button {
-  justify-content: left;
-}
-
-:host(.cat-text-right) .cat-button {
-  justify-content: right;
-}