@indico-data/design-system 2.53.0 → 2.55.0

package/lib/index.esm.css

@@ -438,6 +438,14 @@ a:hover,
   background-color: var(--pf-background-color);
 }
 
+.react-tooltip {
+  z-index: 5;
+  background-color: var(--pf-tooltip-background-color);
+  border: var(--pf-border-sm) solid var(--pf-border-color);
+  opacity: 1 !important;
+  text-wrap: wrap;
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
@@ -1843,51 +1851,6 @@ form {
   margin-bottom: 0;
 }
 
-.time-picker-input {
-  cursor: pointer;
-}
-
-.time-picker-row {
-  width: 150px;
-}
-.time-picker-row .select__value-container {
-  text-align: center;
-  cursor: pointer;
-}
-.time-picker-row .select-wrapper {
-  width: 50px;
-}
-.time-picker-row .select-wrapper .select__items {
-  justify-content: center;
-}
-.time-picker-row .select-wrapper .select__menu {
-  height: 230px;
-  padding-bottom: 0;
-  margin-bottom: 0;
-}
-.time-picker-row .select__menu-list {
-  max-height: 100%;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  overflow-y: scroll;
-}
-.time-picker-row .select__menu-list::-webkit-scrollbar {
-  display: none; /* Chrome, Safari and Opera */
-}
-.time-picker-row .hour-menu .select__menu {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.time-picker-row .minute-menu .select__menu {
-  border-radius: 0;
-  border-right: none;
-  border-left: none;
-}
-.time-picker-row .period-menu .select__menu {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 :root {
   --pf-badge-rounded: var(--pf-rounded);
 }
@@ -2317,51 +2280,6 @@ form {
   display: block;
 }
 
-.time-picker-input {
-  cursor: pointer;
-}
-
-.time-picker-row {
-  width: 150px;
-}
-.time-picker-row .select__value-container {
-  text-align: center;
-  cursor: pointer;
-}
-.time-picker-row .select-wrapper {
-  width: 50px;
-}
-.time-picker-row .select-wrapper .select__items {
-  justify-content: center;
-}
-.time-picker-row .select-wrapper .select__menu {
-  height: 230px;
-  padding-bottom: 0;
-  margin-bottom: 0;
-}
-.time-picker-row .select__menu-list {
-  max-height: 100%;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  overflow-y: scroll;
-}
-.time-picker-row .select__menu-list::-webkit-scrollbar {
-  display: none; /* Chrome, Safari and Opera */
-}
-.time-picker-row .hour-menu .select__menu {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.time-picker-row .minute-menu .select__menu {
-  border-radius: 0;
-  border-right: none;
-  border-left: none;
-}
-.time-picker-row .period-menu .select__menu {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);
@@ -2477,6 +2395,147 @@ form {
   border-color: var(--pf-pill-pending-border-color);
 }
 
+:root [data-theme=light] {
+  --pf-tooltip-background-color: var(--pf-white-color);
+}
+
+:root [data-theme=dark],
+:root {
+  --pf-tooltip-background-color: var(--pf-primary-color-900);
+}
+
+@keyframes moveBg {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(46px);
+  }
+}
+.bar-spinner {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 14px;
+  border-radius: 25px;
+  background-color: var(--pf-primary-color-800);
+}
+.bar-spinner > span {
+  display: block;
+  height: 100%;
+  width: 100%;
+  border-radius: 25px;
+  position: relative;
+  overflow: hidden;
+}
+.bar-spinner > span:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -46px;
+  bottom: 0;
+  right: 0;
+  background: repeating-linear-gradient(-55deg, transparent 1px, rgba(255, 255, 255, 0.25) 2px, rgba(255, 255, 255, 0.25) 11px, transparent 12px, transparent 20px);
+  animation-name: moveBg;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+:root {
+  --circle-pulse-animation-speed: 1.4s;
+  --circle-pulse-border-width: var(--pf-border-xl);
+}
+
+.circle-pulse-xxs {
+  --circle-pulse-size: 20px;
+  --circle-pulse-ripple-size: calc(20px * 1.7);
+}
+
+.circle-pulse-xs {
+  --circle-pulse-size: 40px;
+  --circle-pulse-ripple-size: calc(40px * 1.7);
+}
+
+.circle-pulse-sm {
+  --circle-pulse-size: 60px;
+  --circle-pulse-ripple-size: calc(60px * 1.7);
+}
+
+.circle-pulse-md {
+  --circle-pulse-size: 80px;
+  --circle-pulse-ripple-size: calc(80px * 1.7);
+}
+
+.circle-pulse-lg {
+  --circle-pulse-size: 100px;
+  --circle-pulse-ripple-size: calc(100px * 1.7);
+}
+
+.circle-pulse-xl {
+  --circle-pulse-size: 120px;
+  --circle-pulse-ripple-size: calc(120px * 1.7);
+}
+
+.circle-pulse-xxl {
+  --circle-pulse-size: 140px;
+  --circle-pulse-ripple-size: calc(140px * 1.7);
+}
+
+@keyframes ripple {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}
+.circle-pulse {
+  display: grid;
+  place-items: center;
+  position: relative;
+  width: var(--circle-pulse-size);
+  height: var(--circle-pulse-size);
+  margin-left: auto;
+  margin-right: auto;
+}
+.circle-pulse:before, .circle-pulse:after {
+  content: "";
+  position: absolute;
+  border: var(--circle-pulse-border-width) solid var(--pf-primary-color-300);
+  border-radius: 50%;
+  /* Set initial dimensions */
+  width: var(--circle-pulse-ripple-size);
+  height: var(--circle-pulse-ripple-size);
+  /* Position at center */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transform-origin: center;
+  animation: ripple var(--circle-pulse-animation-speed) cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+@media (prefers-reduced-motion) {
+  .circle-pulse:before, .circle-pulse:after {
+    animation-duration: calc(var(--circle-pulse-animation-speed) * 2);
+  }
+}
+.circle-pulse:after {
+  animation-delay: calc(var(--circle-pulse-animation-speed) * -0.5);
+}
+@media (prefers-reduced-motion) {
+  .circle-pulse:after {
+    animation-delay: calc(var(--circle-pulse-animation-speed) * -1);
+  }
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }