keevo-components 1.8.455 → 1.8.457

package/src/lib/components/kv-button/kv-button.component.scss

@@ -1,203 +1,203 @@
-@import "../keevo-components-styles.scss";
-
-::ng-deep .kv-button .p-button-loading-icon svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-::ng-deep .kv-button .p-button-loading-icon svg g {
-  transform: translate(0, 0);
-}
-
-::ng-deep .kv-button {
-  border: none;
-  // padding: 0.4rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0.125rem;
-
-  .kv-button-label {
-    font-weight: 500;
-  }
-}
-
-::ng-deep .small {
-  height: 1.625rem;
-  min-width: 1.625rem;
-
-  .kv-button-label {
-    font-size: 0.625rem;
-  }
-
-  .kv-button-icon {
-    font-size: 0.75rem;
-  }
-
-  .p-button-loading-icon {
-    width: 0.55rem;
-    height: 0.55rem;
-  }
-}
-
-::ng-deep .normal {
-  height: 1.875rem;
-  min-width: 1.875rem;
-
-  .kv-button-label {
-    font-size: 0.825rem;
-  }
-
-  .kv-button-icon {
-    font-size: 1rem;
-  }
-
-  .p-button-loading-icon {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-}
-
-::ng-deep .large {
-  height: 2.125rem;
-  min-width: 2.125rem;
-
-  .kv-button-label {
-    font-size: 1rem;
-  }
-
-  .kv-button-icon {
-    font-size: 1.25rem;
-  }
-
-  .p-button-loading-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-}
-
-//Primary button
-::ng-deep .primary {
-  background-color: rgb(var(--kv-primary-color));
-  &:hover {
-    background-color: rgba(var(--kv-primary-color), 0.8);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-primary-color), 0.95);
-  }
-}
-
-.primary.outline {
-  border: solid 0.5px rgb(var(--kv-primary-color));
-  background-color: white;
-  color: rgb(var(--kv-primary-color));
-
-  &:hover {
-    background-color: rgb(var(--kv-primary-color));
-    color: white;
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-primary-color), 0.8);
-  }
-}
-
-.primary.text {
-  opacity: 0.9;
-  background-color: transparent;
-  color: rgb(var(--kv-primary-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-primary-color), 0.1);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-primary-color), 0.2);
-  }
-}
-
-//Secondary button
-::ng-deep .secondary {
-  background-color: rgb(var(--kv-secondary-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-secondary-color), 0.8);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-secondary-color), 0.95);
-  }
-}
-
-.secondary.outline {
-  border: solid 0.5px rgb(var(--kv-secondary-color));
-  background-color: white;
-  color: rgb(var(--kv-secondary-color));
-
-  &:hover {
-    background-color: rgb(var(--kv-secondary-color));
-    color: white;
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-secondary-color), 0.8);
-  }
-}
-
-.secondary.text {
-  background-color: transparent;
-  color: rgb(var(--kv-secondary-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-secondary-color), 0.1);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-secondary-color), 0.2);
-  }
-}
-
-//Tertiary button
-::ng-deep .tertiary {
-  color: #212121;
-  background-color: rgba(var(--kv-tertiary-color), 0.3);
-
-  &:hover {
-    background-color: rgba(var(--kv-tertiary-color), 0.8);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-tertiary-color), 0.95);
-  }
-}
-
-.tertiary.outline {
-  border: solid 0.5px rgb(var(--kv-tertiary-color));
-  background-color: white;
-  color: rgb(var(--kv-tertiary-color));
-
-  &:hover {
-    background-color: rgb(var(--kv-tertiary-color));
-    color: white;
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-tertiary-color), 0.8);
-  }
-}
-
-.tertiary.text {
-  background-color: transparent;
-  color: rgb(var(--kv-tertiary-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-tertiary-color), 0.1);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-tertiary-color), 0.2);
-  }
-}
+@import "../keevo-components-styles.scss";
+
+::ng-deep .kv-button .p-button-loading-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+::ng-deep .kv-button .p-button-loading-icon svg g {
+  transform: translate(0, 0);
+}
+
+::ng-deep .kv-button {
+  border: none;
+  // padding: 0.4rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+
+  .kv-button-label {
+    font-weight: 500;
+  }
+}
+
+::ng-deep .small {
+  height: 1.625rem;
+  min-width: 1.625rem;
+
+  .kv-button-label {
+    font-size: 0.625rem;
+  }
+
+  .kv-button-icon {
+    font-size: 0.75rem;
+  }
+
+  .p-button-loading-icon {
+    width: 0.55rem;
+    height: 0.55rem;
+  }
+}
+
+::ng-deep .normal {
+  height: 1.875rem;
+  min-width: 1.875rem;
+
+  .kv-button-label {
+    font-size: 0.825rem;
+  }
+
+  .kv-button-icon {
+    font-size: 1rem;
+  }
+
+  .p-button-loading-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}
+
+::ng-deep .large {
+  height: 2.125rem;
+  min-width: 2.125rem;
+
+  .kv-button-label {
+    font-size: 1rem;
+  }
+
+  .kv-button-icon {
+    font-size: 1.25rem;
+  }
+
+  .p-button-loading-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+//Primary button
+::ng-deep .primary {
+  background-color: rgb(var(--kv-primary-color));
+  &:hover {
+    background-color: rgba(var(--kv-primary-color), 0.8);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-primary-color), 0.95);
+  }
+}
+
+.primary.outline {
+  border: solid 0.5px rgb(var(--kv-primary-color));
+  background-color: white;
+  color: rgb(var(--kv-primary-color));
+
+  &:hover {
+    background-color: rgb(var(--kv-primary-color));
+    color: white;
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-primary-color), 0.8);
+  }
+}
+
+.primary.text {
+  opacity: 0.9;
+  background-color: transparent;
+  color: rgb(var(--kv-primary-color));
+
+  &:hover {
+    background-color: rgba(var(--kv-primary-color), 0.1);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-primary-color), 0.2);
+  }
+}
+
+//Secondary button
+::ng-deep .secondary {
+  background-color: rgb(var(--kv-secondary-color));
+
+  &:hover {
+    background-color: rgba(var(--kv-secondary-color), 0.8);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-secondary-color), 0.95);
+  }
+}
+
+.secondary.outline {
+  border: solid 0.5px rgb(var(--kv-secondary-color));
+  background-color: white;
+  color: rgb(var(--kv-secondary-color));
+
+  &:hover {
+    background-color: rgb(var(--kv-secondary-color));
+    color: white;
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-secondary-color), 0.8);
+  }
+}
+
+.secondary.text {
+  background-color: transparent;
+  color: rgb(var(--kv-secondary-color));
+
+  &:hover {
+    background-color: rgba(var(--kv-secondary-color), 0.1);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-secondary-color), 0.2);
+  }
+}
+
+//Tertiary button
+::ng-deep .tertiary {
+  color: #212121;
+  background-color: rgba(var(--kv-tertiary-color), 0.3);
+
+  &:hover {
+    background-color: rgba(var(--kv-tertiary-color), 0.8);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-tertiary-color), 0.95);
+  }
+}
+
+.tertiary.outline {
+  border: solid 0.5px rgb(var(--kv-tertiary-color));
+  background-color: white;
+  color: rgb(var(--kv-tertiary-color));
+
+  &:hover {
+    background-color: rgb(var(--kv-tertiary-color));
+    color: white;
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-tertiary-color), 0.8);
+  }
+}
+
+.tertiary.text {
+  background-color: transparent;
+  color: rgb(var(--kv-tertiary-color));
+
+  &:hover {
+    background-color: rgba(var(--kv-tertiary-color), 0.1);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-tertiary-color), 0.2);
+  }
+}