@brandsync/wc 1.16.0 → 1.18.0

package/dist/collection/components/bs-company-switcher/bs-company-switcher.css

@@ -0,0 +1,196 @@
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--bs-company-switcher-width);
+  max-width: 100%;
+  --bs-company-switcher-width: 260px;
+  --bs-company-switcher-panel-width: 360px;
+  --bs-company-switcher-radius: var(--bs-border-radius-100);
+  --bs-company-switcher-trigger-bg: transparent;
+  --bs-company-switcher-trigger-bg-hover: var(--bs-surface-hover);
+  --bs-company-switcher-trigger-bg-pressed: var(--bs-surface-pressed);
+  --bs-company-switcher-trigger-bg-open: var(--bs-surface-selected);
+  --bs-company-switcher-focus-ring: var(--bs-border-neutral-focus);
+  --bs-company-switcher-panel-bg: var(--bs-surface-base);
+  --bs-company-switcher-panel-border-color: var(--bs-border-default);
+  --bs-company-switcher-shadow: var(--bs-shadow-md);
+  --bs-company-switcher-max-height: 320px;
+  --bs-company-switcher-text-color: var(--bs-text-default);
+  --bs-company-switcher-muted-color: var(--bs-text-secondary);
+  --bs-company-switcher-header-color: var(--bs-text-muted);
+  --bs-company-switcher-z-index: var(--bs-z-index-popover);
+}
+
+.bs-company-switcher {
+  display: block;
+  width: 100%;
+  --bs-popover-radius: var(--bs-company-switcher-radius);
+  --bs-popover-shadow: var(--bs-company-switcher-shadow);
+  --bs-popover-z-index: var(--bs-company-switcher-z-index);
+  --bs-popover-min-width: 0px;
+  --bs-popover-bg: transparent;
+}
+
+.bs-company-switcher__trigger {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+  width: 100%;
+  min-height: 54px;
+  padding: var(--bs-spacing-100) var(--bs-spacing-150);
+  border: 0;
+  border-radius: var(--bs-company-switcher-radius);
+  background: var(--bs-company-switcher-trigger-bg);
+  color: var(--bs-company-switcher-text-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  text-align: left;
+  cursor: pointer;
+}
+
+.bs-company-switcher__trigger:hover {
+  background: var(--bs-company-switcher-trigger-bg-hover);
+}
+
+.bs-company-switcher__trigger:active {
+  background: var(--bs-company-switcher-trigger-bg-pressed);
+}
+
+:host([open]) .bs-company-switcher__trigger,
+.bs-company-switcher__trigger[aria-busy='true'] {
+  background: var(--bs-company-switcher-trigger-bg-open);
+}
+
+.bs-company-switcher__trigger:focus-visible {
+  outline: 2px solid var(--bs-company-switcher-focus-ring);
+  outline-offset: 2px;
+}
+
+.bs-company-switcher__avatar {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.bs-company-switcher__text {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-company-switcher__name {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-company-switcher__subtitle {
+  color: var(--bs-company-switcher-muted-color);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-company-switcher__name,
+.bs-company-switcher__subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bs-company-switcher__trail {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  color: var(--bs-icon-default);
+}
+
+.bs-company-switcher__panel {
+  display: block;
+  width: var(--bs-company-switcher-panel-width);
+  max-width: calc(100vw - var(--bs-spacing-200));
+  --bs-card-bg: var(--bs-company-switcher-panel-bg);
+  --bs-card-radius: var(--bs-company-switcher-radius);
+  --bs-card-padding: 0px;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-company-switcher-panel-border-color);
+  --bs-card-shadow: none;
+}
+
+.bs-company-switcher__search {
+  padding: var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);
+}
+
+.bs-company-switcher__search bs-input {
+  width: 100%;
+}
+
+.bs-company-switcher__list {
+  box-sizing: border-box;
+  max-height: var(--bs-company-switcher-max-height);
+  overflow-y: auto;
+  padding: 0 var(--bs-spacing-100) var(--bs-spacing-100);
+}
+
+.bs-company-switcher__group-header {
+  padding: var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);
+  color: var(--bs-company-switcher-header-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  font-size: var(--bs-font-size-xs);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 16px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.bs-company-switcher__row {
+  --bs-list-item-min-height: 52px;
+  --bs-list-item-padding-y: var(--bs-spacing-100);
+  --bs-list-item-padding-x: var(--bs-spacing-100);
+  --bs-list-item-gap: var(--bs-spacing-150);
+}
+
+.bs-company-switcher__row--active {
+  --bs-list-item-bg: var(--bs-surface-hover);
+}
+
+.bs-company-switcher__row-name {
+  display: block;
+  color: var(--bs-company-switcher-text-color);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-company-switcher__row-sub {
+  display: block;
+  color: var(--bs-company-switcher-muted-color);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-company-switcher__check {
+  width: 20px;
+  height: 20px;
+  color: var(--bs-icon-action, var(--bs-icon-default));
+}
+
+.bs-company-switcher__empty {
+  --bs-empty-state-padding-y: var(--bs-spacing-400);
+}
+
+.bs-company-switcher__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-100) var(--bs-spacing-150);
+}
+
+.bs-company-switcher__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}