bromcom-ui 2.3.63 → 2.3.64

package/dist/collection/components/atoms/button/buttons.css

@@ -1,508 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
-.size-1 {
-  font-size: 12px;
-  line-height: 20px;
-}
-
-.size-2 {
-  font-size: 14px;
-  line-height: 22px;
-}
-
-.size-3 {
-  font-size: 16px;
-  line-height: 24px;
-}
-
-.size-4 {
-  font-size: 20px;
-  line-height: 28px;
-}
-
-.size-5 {
-  font-size: 24px;
-  line-height: 32px;
-}
-
-.size-6 {
-  font-size: 30px;
-  line-height: 38px;
-}
-
-.size-7 {
-  font-size: 38px;
-  line-height: 46px;
-}
-
-.size-8 {
-  font-size: 46px;
-  line-height: 54px;
-}
-
-.size-9 {
-  font-size: 56px;
-  line-height: 64px;
-}
-
-.weight-regular {
-  font-weight: 400;
-}
-
-.weight-semibold {
-  font-weight: 500;
-}
-
-/**
- * Generator
- */
-.size-1 {
-  font-size: 12px;
-  line-height: 20px;
-}
-
-.size-2 {
-  font-size: 14px;
-  line-height: 22px;
-}
-
-.size-3 {
-  font-size: 16px;
-  line-height: 24px;
-}
-
-.size-4 {
-  font-size: 20px;
-  line-height: 28px;
-}
-
-.size-5 {
-  font-size: 24px;
-  line-height: 32px;
-}
-
-.size-6 {
-  font-size: 30px;
-  line-height: 38px;
-}
-
-.size-7 {
-  font-size: 38px;
-  line-height: 46px;
-}
-
-.size-8 {
-  font-size: 46px;
-  line-height: 54px;
-}
-
-.size-9 {
-  font-size: 56px;
-  line-height: 64px;
-}
-
-.weight-regular {
-  font-weight: 400;
-}
-
-.weight-semibold {
-  font-weight: 500;
-}
-
-:host {
-  display: inline-block;
-  width: fit-content;
-}
-
-:host(.hidden) {
-  display: none;
-}
-
-:host(.full-width) {
-  width: 100%;
-}
-
-.button {
-  border: none;
-  outline: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-family: "Roboto", sans-serif;
-  padding: unset;
-  text-decoration: none;
-  box-sizing: border-box;
-  border-radius: 2px;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-.button.full-width {
-  width: 100%;
-}
-.button.full-width.variant span {
-  flex: none;
-}
-.button .loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.button.rounded {
-  border-radius: 100%;
-}
-.button.rounded .loading {
-  border-radius: 100%;
-}
-.button:before, .button:after {
-  content: "";
-}
-
-.solid {
-  color: var(--bcm-color-grey-1);
-  background-color: var(--bcm-color-prime-blue-6);
-  border: 1px solid var(--bcm-color-prime-blue-6);
-}
-.solid .loading {
-  background-color: var(--bcm-color-prime-blue-6);
-}
-.solid.outline {
-  color: var(--bcm-color-grey-8);
-  background-color: var(--bcm-color-grey-1);
-  border-color: var(--bcm-color-grey-5);
-}
-.solid.outline .loading {
-  background-color: var(--bcm-color-grey-1);
-}
-.solid.outline:hover, .solid.outline:focus {
-  color: var(--bcm-color-prime-blue-5);
-  background-color: var(--bcm-color-grey-1);
-}
-.solid.outline:active {
-  color: var(--bcm-color-prime-blue-7);
-  background-color: var(--bcm-color-grey-1);
-}
-.solid:hover, .solid:focus {
-  background-color: var(--bcm-color-prime-blue-5);
-  border-color: var(--bcm-color-prime-blue-5);
-}
-.solid:active {
-  background-color: var(--bcm-color-prime-blue-7);
-  border-color: var(--bcm-color-prime-blue-7);
-}
-.solid:disabled {
-  color: var(--bcm-color-grey-6) !important;
-  background-color: var(--bcm-color-grey-3) !important;
-  border-color: var(--bcm-color-grey-5);
-  cursor: not-allowed;
-}
-
-.ghost {
-  color: var(--bcm-color-prime-blue-6);
-  background-color: transparent;
-  border: 1px solid var(--bcm-color-prime-blue-6);
-}
-.ghost .loading {
-  background-color: var(--bcm-color-grey-1);
-}
-.ghost.outline {
-  color: var(--bcm-color-grey-1);
-  border-color: var(--bcm-color-grey-1);
-}
-.ghost:hover, .ghost:focus {
-  color: var(--bcm-color-prime-blue-5);
-  border-color: var(--bcm-color-prime-blue-5);
-}
-.ghost:active {
-  color: var(--bcm-color-prime-blue-7);
-  border-color: var(--bcm-color-prime-blue-7);
-}
-.ghost:disabled {
-  color: var(--bcm-color-grey-6);
-  border-color: var(--bcm-color-grey-5);
-  cursor: not-allowed;
-}
-
-.variant.large bcm-icon.prefix {
-  margin-right: 4px;
-}
-.variant span {
-  flex: 1;
-}
-.variant.success.solid {
-  color: var(--bcm-color-grey-1);
-  background-color: var(--bcm-color-bc-green-5);
-  border: 1px solid var(--bcm-color-bc-green-5);
-}
-.variant.success.solid .loading {
-  background-color: var(--bcm-color-bc-green-5);
-}
-.variant.success.solid.outline {
-  color: var(--bcm-color-grey-8);
-  background-color: var(--bcm-color-grey-1);
-  border-color: var(--bcm-color-grey-5);
-}
-.variant.success.solid.outline .loading {
-  background-color: var(--bcm-color-grey-1);
-}
-.variant.success.solid.outline:hover, .variant.success.solid.outline:focus {
-  color: var(--bcm-color-bc-green-4);
-  background-color: var(--bcm-color-grey-1);
-}
-.variant.success.solid.outline:active {
-  color: var(--bcm-color-bc-green-6);
-  background-color: var(--bcm-color-grey-1);
-}
-.variant.success.solid:hover, .variant.success.solid:focus {
-  background-color: var(--bcm-color-bc-green-4);
-  border-color: var(--bcm-color-bc-green-4);
-}
-.variant.success.solid:active {
-  background-color: var(--bcm-color-bc-green-6);
-  border-color: var(--bcm-color-bc-green-6);
-}
-.variant.success.solid:disabled {
-  color: var(--bcm-color-grey-6) !important;
-  background-color: var(--bcm-color-grey-3) !important;
-  border-color: var(--bcm-color-grey-5);
-  cursor: not-allowed;
-}
-.variant.success.ghost {
-  color: var(--bcm-color-bc-green-5);
-  background-color: transparent;
-  border: 1px solid var(--bcm-color-bc-green-5);
-}
-.variant.success.ghost .loading {
-  background-color: var(--bcm-color-grey-1);
-}
-.variant.success.ghost.outline {
-  color: var(--bcm-color-grey-1);
-  border-color: var(--bcm-color-grey-1);
-}
-.variant.success.ghost:hover, .variant.success.ghost:focus {
-  color: var(--bcm-color-bc-green-4);
-  border-color: var(--bcm-color-bc-green-4);
-}
-.variant.success.ghost:active {
-  color: var(--bcm-color-bc-green-6);
-  border-color: var(--bcm-color-bc-green-6);
-}
-.variant.success.ghost:disabled {
-  color: var(--bcm-color-grey-6);
-  border-color: var(--bcm-color-grey-5);
-  cursor: not-allowed;
-}
-.variant.warning.solid {
-  color: var(--bcm-color-grey-1);
-  background-color: var(--bcm-color-bc-red-5);
-  border: 1px solid var(--bcm-color-bc-red-5);
-}
-.variant.warning.solid .loading {
-  background-color: var(--bcm-color-bc-red-5);
-}
-.variant.warning.solid.outline {
-  color: var(--bcm-color-grey-8);
-  background-color: var(--bcm-color-grey-1);
-  border-color: var(--bcm-color-grey-5);
-}
-.variant.warning.solid.outline .loading {
-  background-color: var(--bcm-color-grey-1);
-}
-.variant.warning.solid.outline:hover, .variant.warning.solid.outline:focus {
-  color: var(--bcm-color-bc-red-4);
-  background-color: var(--bcm-color-grey-1);
-}
-.variant.warning.solid.outline:active {
-  color: var(--bcm-color-bc-red-6);
-  background-color: var(--bcm-color-grey-1);
-}
-.variant.warning.solid:hover, .variant.warning.solid:focus {
-  background-color: var(--bcm-color-bc-red-4);
-  border-color: var(--bcm-color-bc-red-4);
-}
-.variant.warning.solid:active {
-  background-color: var(--bcm-color-bc-red-6);
-  border-color: var(--bcm-color-bc-red-6);
-}
-.variant.warning.solid:disabled {
-  color: var(--bcm-color-grey-6) !important;
-  background-color: var(--bcm-color-grey-3) !important;
-  border-color: var(--bcm-color-grey-5);
-  cursor: not-allowed;
-}
-.variant.warning.ghost {
-  color: var(--bcm-color-bc-red-5);
-  background-color: transparent;
-  border: 1px solid var(--bcm-color-bc-red-5);
-}
-.variant.warning.ghost .loading {
-  background-color: var(--bcm-color-grey-1);
-}
-.variant.warning.ghost.outline {
-  color: var(--bcm-color-grey-1);
-  border-color: var(--bcm-color-grey-1);
-}
-.variant.warning.ghost:hover, .variant.warning.ghost:focus {
-  color: var(--bcm-color-bc-red-4);
-  border-color: var(--bcm-color-bc-red-4);
-}
-.variant.warning.ghost:active {
-  color: var(--bcm-color-bc-red-6);
-  border-color: var(--bcm-color-bc-red-6);
-}
-.variant.warning.ghost:disabled {
-  color: var(--bcm-color-grey-6);
-  border-color: var(--bcm-color-grey-5);
-  cursor: not-allowed;
-}
-
-.button > bcm-icon.prefix {
-  margin-right: 4px;
-}
-
-.button > bcm-icon.suffix {
-  margin-left: 4px;
-}
-
-.large {
-  min-height: 40px;
-  min-width: 120px;
-}
-.large bcm-icon.prefix {
-  margin-right: 16px;
-}
-.large bcm-icon.suffix {
-  margin-left: 16px;
-}
-.large:not(.rounded) {
-  padding: 0 16px;
-}
-.large:not(.rounded).with_suffix {
-  padding-right: 0;
-}
-
-.medium {
-  min-height: 32px;
-  min-width: 32px;
-}
-.medium:not(.rounded) {
-  padding: 0 16px;
-}
-.medium:not(.rounded).with_suffix {
-  padding-right: 0;
-}
-
-.small {
-  min-height: 24px;
-  min-width: 24px;
-}
-.small:not(.rounded) {
-  padding: 0 8px;
-}
-.small:not(.rounded).with_suffix {
-  padding-right: 0;
-}
-
-.ghost-link {
-  width: auto;
-  min-width: 40px;
-  color: var(--bcm-color-prime-blue-6);
-  background-color: transparent;
-}
-.ghost-link .loading {
-  background-color: var(--bcm-color-grey-1);
-}
-.ghost-link.outline {
-  color: var(--bcm-color-grey-1);
-}
-.ghost-link:hover, .ghost-link:focus {
-  color: var(--bcm-color-prime-blue-5);
-}
-.ghost-link:active {
-  color: var(--bcm-color-prime-blue-7);
-}
-.ghost-link:disabled {
-  color: var(--bcm-color-grey-6);
-  cursor: not-allowed;
-}
-.ghost-link.large bcm-icon.prefix {
-  margin-right: 8px;
-}
-.ghost-link.large:not(.rounded) {
-  padding-left: 8px;
-}
-.ghost-link.large:not(.rounded):not(.with_suffix) {
-  padding-right: 5px;
-}
-.ghost-link.rounded {
-  border-radius: 2px;
-}
-
-.solid-link, .link {
-  width: auto;
-  min-width: 40px;
-  color: var(--bcm-color-grey-1);
-  background-color: var(--bcm-color-prime-blue-6);
-}
-.solid-link .loading, .link .loading {
-  background-color: var(--bcm-color-prime-blue-6);
-}
-.solid-link.outline, .link.outline {
-  color: var(--bcm-color-grey-8);
-  background-color: var(--bcm-color-grey-1);
-}
-.solid-link.outline .loading, .link.outline .loading {
-  background-color: var(--bcm-color-grey-1);
-}
-.solid-link.outline:hover, .solid-link.outline:focus, .link.outline:hover, .link.outline:focus {
-  color: var(--bcm-color-prime-blue-5);
-}
-.solid-link.outline:active, .link.outline:active {
-  color: var(--bcm-color-prime-blue-7);
-}
-.solid-link:hover, .solid-link:focus, .link:hover, .link:focus {
-  background-color: var(--bcm-color-prime-blue-5);
-}
-.solid-link:active, .link:active {
-  background-color: var(--bcm-color-prime-blue-7);
-}
-.solid-link:disabled, .link:disabled {
-  color: var(--bcm-color-grey-6) !important;
-  background-color: var(--bcm-color-grey-3) !important;
-  cursor: not-allowed;
-}
-.solid-link.large bcm-icon.prefix, .link.large bcm-icon.prefix {
-  margin-right: 8px;
-}
-.solid-link.large:not(.rounded), .link.large:not(.rounded) {
-  padding-left: 8px;
-}
-.solid-link.large:not(.rounded):not(.with_suffix), .link.large:not(.rounded):not(.with_suffix) {
-  padding-right: 5px;
-}
-.solid-link.rounded, .link.rounded {
-  border-radius: 2px;
-}
-
-:host-context(.split_summary.open) .solid {
-  background-color: var(--bcm-color-prime-blue-7);
-  border-color: var(--bcm-color-prime-blue-7);
-}
-:host-context(.split_summary.open) .solid.outline {
-  color: var(--bcm-color-prime-blue-7);
-  border-color: var(--bcm-color-prime-blue-7);
-  background-color: var(--bcm-color-grey-1);
-}
-
-:host-context(.split_summary) .large:not(.rounded) bcm-icon.prefix {
-  margin-right: 4px;
-}
-:host-context(.split_summary) .large:not(.rounded) bcm-icon.suffix {
-  margin-left: 4px;
-}

package/dist/collection/components/atoms/button/types.js

@@ -1,176 +0,0 @@
-/**
- * 'type' prop variantOption
- */
-export const variantOptions = {
-  save: {
-    text: "Save",
-    class: "success",
-    icon: "save",
-    iconPosition: "prefix",
-  },
-  ok: {
-    text: "Ok",
-    class: "success",
-    icon: "check",
-    iconPosition: "prefix",
-  },
-  new: {
-    text: "New",
-    class: "success",
-    icon: "plus",
-    iconPosition: "prefix",
-  },
-  add: {
-    text: "Add",
-    class: "success",
-    icon: "plus",
-    iconPosition: "prefix",
-  },
-  create: {
-    text: "Create",
-    class: "success",
-    icon: "form",
-    iconPosition: "prefix",
-  },
-  prev: {
-    text: "Prev",
-    class: "",
-    icon: "arrow-left",
-    iconPosition: "prefix",
-  },
-  next: {
-    text: "Next",
-    class: "",
-    icon: "arrow-right",
-    iconPosition: "suffix",
-  },
-  apply: {
-    text: "Apply",
-    class: "",
-    icon: "check-circle",
-    iconPosition: "prefix",
-  },
-  submit: {
-    text: "Submit",
-    class: "",
-    icon: "save",
-    iconPosition: "prefix",
-  },
-  send: {
-    text: "Send",
-    class: "success",
-    icon: "send",
-    iconPosition: "prefix",
-  },
-  delete: {
-    text: "Delete",
-    class: "warning",
-    icon: "delete",
-    iconPosition: "prefix",
-  },
-  cancel: {
-    text: "Cancel",
-    class: "warning",
-    icon: "close",
-    iconPosition: "prefix",
-  },
-  decline: {
-    text: "Decline",
-    class: "warning",
-    icon: "stop",
-    iconPosition: "prefix",
-  },
-  close: {
-    text: "Close",
-    class: "warning",
-    icon: "close-circle",
-    iconPosition: "prefix",
-  },
-  archive: {
-    text: "Archive",
-    class: "warning",
-    icon: "folder-open",
-    iconPosition: "prefix",
-  },
-  remove: {
-    text: "Remove",
-    class: "warning",
-    icon: "minus-circle",
-    iconPosition: "prefix",
-  },
-  edit: {
-    text: "Edit",
-    class: "",
-    icon: "edit",
-    iconPosition: "prefix",
-  },
-  export: {
-    text: "Export",
-    class: "",
-    icon: "export",
-    iconPosition: "prefix",
-  },
-  import: {
-    text: "Import",
-    class: "",
-    icon: "import",
-    iconPosition: "prefix",
-  },
-  filter: {
-    text: "Filter",
-    class: "",
-    icon: "filter",
-    iconPosition: "prefix",
-  },
-  update: {
-    text: "Update",
-    class: "",
-    icon: "sync",
-    iconPosition: "prefix",
-  },
-  download: {
-    text: "Download",
-    class: "",
-    icon: "download",
-    iconPosition: "prefix",
-  },
-};
-/**
- * 'type' prop variant
- */
-export var VariantProps;
-(function (VariantProps) {
-  VariantProps["save"] = "save";
-  VariantProps["ok"] = "ok";
-  VariantProps["new"] = "new";
-  VariantProps["add"] = "add";
-  VariantProps["create"] = "create";
-  VariantProps["apply"] = "apply";
-  VariantProps["prev"] = "prev";
-  VariantProps["next"] = "next";
-  VariantProps["send"] = "send";
-  VariantProps["delete"] = "delete";
-  VariantProps["cancel"] = "cancel";
-  VariantProps["decline"] = "decline";
-  VariantProps["close"] = "close";
-  VariantProps["archive"] = "archive";
-  VariantProps["remove"] = "remove";
-  VariantProps["edit"] = "edit";
-  VariantProps["export"] = "export";
-  VariantProps["import"] = "import";
-  VariantProps["filter"] = "filter";
-  VariantProps["update"] = "update";
-  VariantProps["download"] = "download";
-})(VariantProps || (VariantProps = {}));
-export const iconSizes = {
-  default: {
-    large: 16,
-    medium: 14,
-    small: 14,
-  },
-  iconOnly: {
-    large: 20,
-    medium: 18,
-    small: 16,
-  },
-};