@agnos-ui/core-bootstrap/css/agnosui.css

Styles and component interface extensions necessary to use AgnosUI with Bootstrap.

/**
* Utility function to replace a substring as Sass doesn't provide the built-in method to do it
*/
/**
* Method implementation taken from Bootstrap
* ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
*/
.au-tree {
  --bs-tree-item-padding-start: 2.25rem;
  --bs-tree-expand-icon-margin-inline-end: 0.5rem;
  --bs-tree-expand-icon-border-radius: 0.375rem;
  --bs-tree-expand-icon-background-color: transparent;
  --bs-tree-expand-icon-background-color-hover: var(--bs-blue-100, #cfe2ff);
  --bs-tree-expand-icon-width: 2.25rem;
  --bs-tree-expand-icon-height: 2.25rem;
  --bs-tree-expand-icon: url('data:image/svg+xml;utf8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"%3e%3cpath d="M3 1 L7 5 L3 9" stroke="%230d6efd" stroke-width="1" fill="none"/%3e%3c/svg%3e');
  --bs-tree-expand-icon-hover: url('data:image/svg+xml;utf8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"%3e%3cpath d="M3 1 L7 5 L3 9" stroke="%23052c65" stroke-width="1" fill="none"/%3e%3c/svg%3e');
  list-style: none;
  padding: 0;
  margin: 0;
}
.au-tree ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-inline-start: var(--bs-tree-item-padding-start);
  margin: 0;
}
.au-tree li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.au-tree .au-tree-item {
  position: relative;
  display: flex;
  align-items: center;
}
.au-tree .au-tree-expand-icon-placeholder {
  display: flex;
  width: calc(var(--bs-tree-expand-icon-width) + var(--bs-tree-expand-icon-margin-inline-end));
}
.au-tree .au-tree-expand-icon {
  width: var(--bs-tree-expand-icon-width);
  height: var(--bs-tree-expand-icon-height);
  border-radius: var(--bs-tree-expand-icon-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding-inline: 0;
  margin-inline-end: var(--bs-tree-expand-icon-margin-inline-end);
  background-color: var(--bs-tree-expand-icon-background-color);
  cursor: pointer;
}
.au-tree .au-tree-expand-icon:hover {
  --bs-tree-expand-icon: var(--bs-tree-expand-icon-hover);
  --bs-tree-expand-icon-background-color: var(--bs-tree-expand-icon-background-color-hover);
}
.au-tree .au-tree-expand-icon .au-tree-expand-icon-svg {
  content: var(--bs-tree-expand-icon);
  transition: transform 0.3s;
}
.au-tree .au-tree-expand-icon.au-tree-expand-icon-expanded .au-tree-expand-icon-svg {
  transform: rotate(90deg);
}

.au-select:focus-within {
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.au-select-input {
  border: 0;
  flex-grow: 1;
  outline: none;
}

.au-slider {
  --bs-slider-background-color: var(--bs-secondary-bg, #e9ecef);
  --bs-slider-font-size: 1rem;
  --bs-slider-border-radius: 0.125rem;
  --bs-slider-line-height: 1.5;
  --bs-slider-primary-size: 100%;
  --bs-slider-secondary-size: 0.25rem;
  --bs-slider-margin-block-start: calc((1.25rem - 0.25rem) / 2 + 1rem * 1.5 + 0.5rem);
  --bs-slider-margin-block-end: calc((1.25rem - 0.25rem) / 2 + 0.5rem);
  --bs-slider-vertical-margin-inline-start: 1rem;
  --bs-slider-vertical-margin-inline-end: 3rem;
  --bs-slider-translate-vertical: translateY(-50%);
  --bs-slider-translate-horizontal: translateX(-50%);
  --bs-slider-handle-color: var(--bs-primary, #0d6efd);
  --bs-slider-handle-hover-color: var(--bs-primary, #0d6efd);
  --bs-slider-handle-size: 1.25rem;
  --bs-slider-handle-border: none;
  --bs-slider-handle-border-hover: none;
  --bs-slider-handle-border-radius: 50%;
  --bs-slider-handle-outline: none;
  --bs-slider-handle-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-slider-handle-focus-hover-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-slider-tick-primary-size: 1rem;
  --bs-slider-tick-secondary-size: 1rem;
  --bs-slider-tick-neutral-color: var(--bs-light-emphasis, #666666);
  --bs-slider-tick-selected-color: var(--bs-primary, #0d6efd);
  --bs-slider-tick-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
  --bs-slider-tick-fill-color: var(--bs-white, #ffffff);
  --bs-slider-tick-label-translate-vertical: translateY(75%);
  --bs-slider-progress-color: var(--bs-primary, #0d6efd);
  --bs-slider-progress-height: 0.25rem;
  --bs-slider-progress-vertical-transform: rotate(90deg);
  --bs-slider-label-margin-block-start: calc(-1 * (1rem * 1.5 + (1.25rem - 0.25rem) / 2));
  --bs-slider-label-font-weight: normal;
  --bs-slider-label-now-font-weight: normal;
  --bs-slider-label-min-position: 0;
  --bs-slider-label-max-position: 0;
  --bs-slider-label-now-transform: translateX(-50%);
  --bs-slider-label-vertical-margin-inline-start: 1rem;
  --bs-slider-label-vertical-min-transform: translateY(-75%);
  --bs-slider-label-vertical-max-transform: translateY(-25%);
  --bs-slider-label-vertical-white-space: nowrap;
  --bs-slider-label-vertical-min-top: 100%;
  --bs-slider-label-vertical-max-top: 0%;
  --bs-slider-label-vertical-now-transform: translateY(-50%);
  --bs-slider-clickable-area-main-size: 1.5rem;
  --bs-slider-clickable-area-secondary-size: 100%;
  --bs-slider-clickable-area-translate: translateY(-50%);
  --bs-slider-clickable-area-vertical-translate: translateX(-50%);
  --bs-slider-clickable-area-vertical-flex-shrink: 0;
  --bs-slider-clickable-area-cursor: pointer;
  --bs-slider-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
  --bs-slider-disabled-cursor: not-allowed;
  display: flex;
  background-color: var(--bs-slider-background-color);
  border-radius: var(--bs-slider-border-radius);
  font-size: var(--bs-slider-font-size);
  line-height: var(--bs-slider-line-height);
  position: relative;
}
.au-slider.au-slider-lg {
  --bs-slider-font-size: 1.125rem;
  --bs-slider-border-radius: calc(0.3125rem / 2);
  --bs-slider-secondary-size: 0.3125rem;
  --bs-slider-margin-block-start: calc((1.5rem - 0.3125rem) / 2 + 1.125rem * 1.5 + 0rem);
  --bs-slider-margin-block-end: calc((1.5rem - 0.3125rem) / 2 + 0rem);
  --bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
  --bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
  --bs-slider-handle-size: 1.5rem;
  --bs-slider-tick-primary-size: 1.25rem;
  --bs-slider-tick-secondary-size: 1.25rem;
  --bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
  --bs-slider-tick-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.25rem - 0.3125rem) / 2));
  --bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
}
.au-slider.au-slider-sm {
  --bs-slider-font-size: 0.875rem;
  --bs-slider-border-radius: calc(0.2rem / 2);
  --bs-slider-secondary-size: 0.2rem;
  --bs-slider-margin-block-start: calc((1rem - 0.2rem) / 2 + 0.875rem * 1.5 + 0rem);
  --bs-slider-margin-block-end: calc((1rem - 0.2rem) / 2 + 0rem);
  --bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
  --bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
  --bs-slider-handle-size: 1rem;
  --bs-slider-tick-primary-size: 0.75rem;
  --bs-slider-tick-secondary-size: 0.75rem;
  --bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
  --bs-slider-tick-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (0.75rem - 0.2rem) / 2));
  --bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
}
.au-slider.au-slider-horizontal {
  width: var(--bs-slider-primary-size);
  height: var(--bs-slider-secondary-size);
  margin-block-start: var(--bs-slider-margin-block-start);
  margin-block-end: var(--bs-slider-margin-block-end);
}
.au-slider.au-slider-horizontal .au-slider-handle-horizontal {
  top: calc(50% - var(--bs-slider-handle-size) / 2);
  transform: var(--bs-slider-translate-horizontal);
}
.au-slider.au-slider-horizontal .au-slider-tick-horizontal {
  top: calc(50% - var(--bs-slider-tick-primary-size) / 2);
  transform: var(--bs-slider-translate-horizontal);
}
.au-slider.au-slider-vertical {
  height: var(--bs-slider-primary-size);
  width: var(--bs-slider-secondary-size);
  margin-inline-start: var(--bs-slider-vertical-margin-inline-start);
  margin-inline-end: var(--bs-slider-vertical-margin-inline-end);
}
.au-slider.au-slider-vertical .au-slider-handle-vertical {
  left: calc(50% - var(--bs-slider-handle-size) / 2);
  transform: var(--bs-slider-translate-vertical);
}
.au-slider.au-slider-vertical .au-slider-tick-vertical {
  left: calc(50% - var(--bs-slider-tick-primary-size) / 2);
  transform: var(--bs-slider-translate-vertical);
}
.au-slider .au-slider-handle {
  background-color: var(--bs-slider-handle-color);
  border: var(--bs-slider-handle-border);
  border-radius: var(--bs-slider-handle-border-radius);
  outline: var(--bs-slider-handle-outline);
  position: absolute;
  width: var(--bs-slider-handle-size);
  height: var(--bs-slider-handle-size);
}
.au-slider .au-slider-handle:not([disabled]):hover {
  border: var(--bs-slider-handle-border-hover);
  background-color: var(--bs-slider-handle-hover-color);
}
.au-slider .au-slider-handle:not([disabled]):hover:focus-visible {
  box-shadow: var(--bs-slider-handle-focus-hover-box-shadow);
}
.au-slider .au-slider-handle:focus-visible {
  box-shadow: var(--bs-slider-handle-focus-box-shadow);
}
.au-slider .au-slider-tick {
  position: absolute;
  height: var(--bs-slider-tick-primary-size);
  width: var(--bs-slider-tick-secondary-size);
  cursor: var(--bs-slider-clickable-area-cursor);
}
.au-slider .au-slider-tick svg {
  display: block;
  width: var(--bs-slider-tick-secondary-size);
  height: var(--bs-slider-tick-primary-size);
  fill: none;
}
.au-slider .au-slider-tick svg circle {
  cx: 50%;
  cy: 50%;
  fill: var(--bs-slider-tick-fill-color);
}
.au-slider .au-slider-tick svg circle.au-slider-tick-outer {
  r: 45%;
  stroke: var(--bs-slider-tick-neutral-color);
  stroke-width: 1.5;
}
.au-slider .au-slider-tick svg circle.au-slider-tick-outer.au-slider-tick-disabled {
  stroke: var(--bs-slider-tick-disabled-color);
}
.au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer {
  fill: var(--bs-slider-tick-selected-color);
  stroke: none;
  r: 50%;
}
.au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer.au-slider-tick-disabled {
  fill: var(--bs-slider-tick-disabled-color);
}
.au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-inner {
  r: 25%;
}
.au-slider .au-slider-tick-label {
  position: absolute;
  text-wrap: nowrap;
  transform: var(--bs-slider-translate-horizontal);
  margin-block-start: var(--bs-slider-label-margin-block-start);
}
.au-slider .au-slider-tick-label-vertical {
  position: absolute;
  margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
  transform: var(--bs-slider-tick-label-translate-vertical);
}
.au-slider .au-slider-tick-label-now {
  font-weight: var(--bs-slider-label-now-font-weight);
}
.au-slider .au-slider-progress {
  background-color: var(--bs-slider-progress-color);
  border-radius: var(--bs-slider-border-radius);
  position: absolute;
}
.au-slider .au-slider-progress-vertical {
  transform: var(--bs-slider-progress-vertical-transform);
}
.au-slider .au-slider-label {
  font-weight: var(--bs-slider-label-font-weight);
  margin-block-start: var(--bs-slider-label-margin-block-start);
  position: absolute;
  text-wrap: nowrap;
}
.au-slider .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
  left: var(--bs-slider-label-min-position);
}
.au-slider .au-slider-label.au-slider-label-min.au-slider-rtl {
  right: var(--bs-slider-label-max-position);
}
.au-slider .au-slider-label.au-slider-label-max:not(.au-slider-rtl) {
  right: var(--bs-slider-label-max-position);
}
.au-slider .au-slider-label.au-slider-label-max.au-slider-rtl {
  left: var(--bs-slider-label-min-position);
}
.au-slider .au-slider-label.au-slider-label-now {
  font-weight: var(--bs-slider-label-now-font-weight);
  transform: var(--bs-slider-label-now-transform);
}
.au-slider .au-slider-label.invisible {
  visibility: hidden;
}
.au-slider .au-slider-label-vertical {
  position: absolute;
  margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
  white-space: var(--bs-slider-label-vertical-white-space);
}
.au-slider .au-slider-label-vertical.au-slider-label-vertical-min:not(.au-slider-rtl) {
  top: var(--bs-slider-label-vertical-min-top);
  transform: var(--bs-slider-label-vertical-min-transform);
}
.au-slider .au-slider-label-vertical.au-slider-label-vertical-min.au-slider-rtl {
  top: var(--bs-slider-label-vertical-max-top);
  transform: var(--bs-slider-label-vertical-max-transform);
}
.au-slider .au-slider-label-vertical.au-slider-label-vertical-max:not(.au-slider-rtl) {
  top: var(--bs-slider-label-vertical-max-top);
  transform: var(--bs-slider-label-vertical-max-transform);
}
.au-slider .au-slider-label-vertical.au-slider-label-vertical-max.au-slider-rtl {
  top: var(--bs-slider-label-vertical-min-top);
  transform: var(--bs-slider-label-vertical-min-transform);
}
.au-slider .au-slider-label-vertical.au-slider-label-vertical-now {
  transform: var(--bs-slider-label-vertical-now-transform);
}
.au-slider .au-slider-clickable-area {
  height: var(--bs-slider-clickable-area-main-size);
  width: var(--bs-slider-clickable-area-secondary-size);
  transform: var(--bs-slider-clickable-area-translate);
  cursor: var(--bs-slider-clickable-area-cursor);
}
.au-slider .au-slider-clickable-area-vertical {
  width: var(--bs-slider-clickable-area-main-size);
  height: var(--bs-slider-clickable-area-secondary-size);
  transform: var(--bs-slider-clickable-area-vertical-translate);
  flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
  cursor: var(--bs-slider-clickable-area-cursor);
}
.au-slider .au-slider-clickable-area-with-ticks {
  cursor: default;
}
.au-slider.disabled {
  cursor: var(--bs-slider-disabled-cursor);
}
.au-slider.disabled .au-slider-label,
.au-slider.disabled .au-slider-label-vertical,
.au-slider.disabled .au-slider-tick-label,
.au-slider.disabled .au-slider-tick-label-vertical {
  color: var(--bs-slider-disabled-color);
}
.au-slider.disabled .au-slider-progress,
.au-slider.disabled .au-slider-handle {
  background-color: var(--bs-slider-disabled-color);
  cursor: var(--bs-slider-disabled-cursor);
}
.au-slider.disabled .au-slider-clickable-area,
.au-slider.disabled .au-slider-clickable-area-vertical,
.au-slider.disabled .au-slider-tick {
  cursor: var(--bs-slider-disabled-cursor);
}

.au-rating.d-inline-flex {
  display: inline-flex;
}
.au-rating .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.au-carousel {
  overflow: hidden;
}

.au-carousel-container {
  display: flex;
  touch-action: pan-y pinch-zoom;
}

.au-carousel-slide {
  flex: 0 0 100%;
  user-select: none;
  position: relative;
}

.au-toaster {
  display: flex;
}

.au-toaster-container {
  padding: 1rem;
}

/*# sourceMappingURL=agnosui.css.map */