@bodynarf/react.components 1.13.8 → 1.14.1

package/components/timeline/component/style.css

@@ -0,0 +1,488 @@
+@keyframes timeline-fade-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes timeline-fade-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.bbr-timeline {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.bbr-timeline .bbr-timeline-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: 2rem;
+}
+.bbr-timeline .bbr-timeline-item:last-child {
+  padding-bottom: 0;
+}
+.bbr-timeline .bbr-timeline-item:last-child .bbr-timeline-connector {
+  display: none;
+}
+.bbr-timeline .bbr-timeline-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  min-width: 1.5rem;
+  border-radius: 50%;
+  background: hsl(171, 100%, 41%);
+  border: 2px solid hsl(171, 100%, 41%);
+  color: hsl(0, 0%, 100%);
+  font-size: 0.75rem;
+  font-weight: 600;
+  z-index: 1;
+  flex-shrink: 0;
+}
+.bbr-timeline .bbr-timeline-icon,
+.bbr-timeline .bbr-timeline-marker-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.65rem;
+}
+.bbr-timeline .bbr-timeline-content {
+  flex: 1;
+  background: hsl(0, 0%, 100%);
+  border: 1px solid hsl(0, 0%, 86%);
+  border-radius: 4px;
+  padding: 1rem;
+  margin-left: 1rem;
+  box-shadow: 0 2px 4px rgba(10.2, 10.2, 10.2, 0.05);
+}
+.bbr-timeline .bbr-timeline-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: hsl(0, 0%, 21%);
+  line-height: 1.25;
+}
+.bbr-timeline .bbr-timeline-text {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: hsl(0, 0%, 48%);
+  line-height: 1.5;
+}
+.bbr-timeline .bbr-timeline-timestamp {
+  font-size: 0.75rem;
+  color: hsl(0, 0%, 71%);
+  margin-bottom: 0.25rem;
+}
+.bbr-timeline .bbr-timeline-connector {
+  position: absolute;
+  left: calc(0.75rem - 1px);
+  top: 1.5rem;
+  width: 2px;
+  height: calc(100% - 1.5rem);
+  background: hsl(0, 0%, 86%);
+  z-index: 0;
+}
+.bbr-timeline.is-left-aligned .bbr-timeline-item {
+  padding-left: 0;
+}
+.bbr-timeline.is-centered .bbr-timeline-item {
+  width: 50%;
+  margin-left: 50%;
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) {
+  margin-left: 0;
+  flex-direction: row-reverse;
+  text-align: right;
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) .bbr-timeline-content {
+  margin-left: 0;
+  margin-right: 1rem;
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) .bbr-timeline-connector {
+  left: auto;
+  right: calc(0.75rem - 1px);
+}
+.bbr-timeline.is-centered .bbr-timeline-marker {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) .bbr-timeline-marker {
+  left: auto;
+  right: 0;
+  transform: translateX(50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(even) .bbr-timeline-marker {
+  left: 0;
+  transform: translateX(-50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-connector {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) .bbr-timeline-connector {
+  left: auto;
+  right: 0;
+  transform: translateX(50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(even) .bbr-timeline-connector {
+  left: 0;
+  transform: translateX(-50%);
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-timestamp {
+  position: absolute;
+  width: 100%;
+  margin-bottom: 0;
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-timestamp.is-left {
+  right: calc(50% + 0.75rem + 1rem);
+  left: auto;
+  text-align: right;
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-timestamp.is-right {
+  left: calc(50% + 0.75rem + 1rem);
+  right: auto;
+  text-align: left;
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-item:nth-child(odd) .bbr-timeline-timestamp.is-left {
+  display: none;
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-item:nth-child(even) .bbr-timeline-timestamp.is-right {
+  display: none;
+}
+.bbr-timeline.is-hollow .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-white .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 100%);
+  color: hsl(0, 0%, 100%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-black .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 4%);
+  color: hsl(0, 0%, 4%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-light .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 96%);
+  color: hsl(0, 0%, 96%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-dark .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 21%);
+  color: hsl(0, 0%, 21%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-primary .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(171, 100%, 41%);
+  color: hsl(171, 100%, 41%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-link .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(229, 53%, 53%);
+  color: hsl(229, 53%, 53%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-info .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(207, 61%, 53%);
+  color: hsl(207, 61%, 53%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-success .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(153, 53%, 53%);
+  color: hsl(153, 53%, 53%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-warning .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(44, 100%, 77%);
+  color: hsl(44, 100%, 77%);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-danger .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(348, 86%, 61%);
+  color: hsl(348, 86%, 61%);
+}
+.bbr-timeline.is-animated .bbr-timeline-item {
+  opacity: 0;
+}
+.bbr-timeline.is-animated .bbr-timeline-item.is-animated-left {
+  animation: timeline-fade-in-left 0.5s ease forwards;
+}
+.bbr-timeline.is-animated .bbr-timeline-item.is-animated-right {
+  animation: timeline-fade-in-right 0.5s ease forwards;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(1) {
+  animation-delay: 0s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(3) {
+  animation-delay: 0.3s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(4) {
+  animation-delay: 0.45s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(5) {
+  animation-delay: 0.6s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(6) {
+  animation-delay: 0.75s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(7) {
+  animation-delay: 0.9s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(8) {
+  animation-delay: 1.05s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(9) {
+  animation-delay: 1.2s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(10) {
+  animation-delay: 1.35s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(11) {
+  animation-delay: 1.5s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(12) {
+  animation-delay: 1.65s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(13) {
+  animation-delay: 1.8s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(14) {
+  animation-delay: 1.95s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(15) {
+  animation-delay: 2.1s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(16) {
+  animation-delay: 2.25s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(17) {
+  animation-delay: 2.4s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(18) {
+  animation-delay: 2.55s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(19) {
+  animation-delay: 2.7s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(20) {
+  animation-delay: 2.85s;
+}
+.bbr-timeline.is-small .bbr-timeline-marker {
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  font-size: 0.625rem;
+}
+.bbr-timeline.is-small .bbr-timeline-icon,
+.bbr-timeline.is-small .bbr-timeline-marker-content {
+  font-size: 0.55rem;
+}
+.bbr-timeline.is-small .bbr-timeline-title {
+  font-size: 0.875rem;
+}
+.bbr-timeline.is-small .bbr-timeline-text {
+  font-size: 0.75rem;
+}
+.bbr-timeline.is-small .bbr-timeline-timestamp {
+  font-size: 0.625rem;
+}
+.bbr-timeline.is-small .bbr-timeline-content {
+  padding: 0.75rem;
+}
+.bbr-timeline.is-small .bbr-timeline-connector {
+  left: calc(0.625rem - 1px);
+  top: 1.25rem;
+  height: calc(100% - 1.25rem);
+}
+.bbr-timeline.is-medium .bbr-timeline-marker {
+  width: 1.75rem;
+  height: 1.75rem;
+  min-width: 1.75rem;
+  font-size: 0.875rem;
+}
+.bbr-timeline.is-medium .bbr-timeline-icon,
+.bbr-timeline.is-medium .bbr-timeline-marker-content {
+  font-size: 0.75rem;
+}
+.bbr-timeline.is-medium .bbr-timeline-title {
+  font-size: 1.125rem;
+}
+.bbr-timeline.is-medium .bbr-timeline-text {
+  font-size: 1rem;
+}
+.bbr-timeline.is-medium .bbr-timeline-connector {
+  left: calc(0.875rem - 1px);
+  top: 1.75rem;
+  height: calc(100% - 1.75rem);
+}
+.bbr-timeline.is-large .bbr-timeline-marker {
+  width: 2rem;
+  height: 2rem;
+  min-width: 2rem;
+  font-size: 1rem;
+}
+.bbr-timeline.is-large .bbr-timeline-icon,
+.bbr-timeline.is-large .bbr-timeline-marker-content {
+  font-size: 0.875rem;
+}
+.bbr-timeline.is-large .bbr-timeline-title {
+  font-size: 1.25rem;
+}
+.bbr-timeline.is-large .bbr-timeline-text {
+  font-size: 1.125rem;
+}
+.bbr-timeline.is-large .bbr-timeline-content {
+  padding: 1.25rem;
+}
+.bbr-timeline.is-large .bbr-timeline-connector {
+  left: calc(1rem - 1px);
+  top: 2rem;
+  height: calc(100% - 2rem);
+}
+.bbr-timeline.is-white .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 100%);
+  color: hsl(0, 0%, 4%);
+}
+.bbr-timeline.is-white .bbr-timeline-connector {
+  background: rgba(255, 255, 255, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-white .bbr-timeline-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 100%);
+  color: hsl(0, 0%, 4%);
+}
+.bbr-timeline.is-black .bbr-timeline-marker {
+  background: hsl(0, 0%, 4%);
+  border-color: hsl(0, 0%, 4%);
+  color: hsl(0, 0%, 100%);
+}
+.bbr-timeline.is-black .bbr-timeline-connector {
+  background: rgba(10.2, 10.2, 10.2, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-black .bbr-timeline-marker {
+  background: hsl(0, 0%, 4%);
+  border-color: hsl(0, 0%, 4%);
+  color: hsl(0, 0%, 100%);
+}
+.bbr-timeline.is-light .bbr-timeline-marker {
+  background: hsl(0, 0%, 96%);
+  border-color: hsl(0, 0%, 96%);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-timeline.is-light .bbr-timeline-connector {
+  background: rgba(244.8, 244.8, 244.8, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-light .bbr-timeline-marker {
+  background: hsl(0, 0%, 96%);
+  border-color: hsl(0, 0%, 96%);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-timeline.is-dark .bbr-timeline-marker {
+  background: hsl(0, 0%, 21%);
+  border-color: hsl(0, 0%, 21%);
+  color: #fff;
+}
+.bbr-timeline.is-dark .bbr-timeline-connector {
+  background: rgba(53.55, 53.55, 53.55, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-dark .bbr-timeline-marker {
+  background: hsl(0, 0%, 21%);
+  border-color: hsl(0, 0%, 21%);
+  color: #fff;
+}
+.bbr-timeline.is-primary .bbr-timeline-marker {
+  background: hsl(171, 100%, 41%);
+  border-color: hsl(171, 100%, 41%);
+  color: #fff;
+}
+.bbr-timeline.is-primary .bbr-timeline-connector {
+  background: rgba(0, 209.1, 177.735, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-primary .bbr-timeline-marker {
+  background: hsl(171, 100%, 41%);
+  border-color: hsl(171, 100%, 41%);
+  color: #fff;
+}
+.bbr-timeline.is-link .bbr-timeline-marker {
+  background: hsl(229, 53%, 53%);
+  border-color: hsl(229, 53%, 53%);
+  color: #fff;
+}
+.bbr-timeline.is-link .bbr-timeline-connector {
+  background: rgba(71.6295, 94.92035, 198.6705, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-link .bbr-timeline-marker {
+  background: hsl(229, 53%, 53%);
+  border-color: hsl(229, 53%, 53%);
+  color: #fff;
+}
+.bbr-timeline.is-info .bbr-timeline-marker {
+  background: hsl(207, 61%, 53%);
+  border-color: hsl(207, 61%, 53%);
+  color: #fff;
+}
+.bbr-timeline.is-info .bbr-timeline-connector {
+  background: rgba(62.0415, 142.46085, 208.2585, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-info .bbr-timeline-marker {
+  background: hsl(207, 61%, 53%);
+  border-color: hsl(207, 61%, 53%);
+  color: #fff;
+}
+.bbr-timeline.is-success .bbr-timeline-marker {
+  background: hsl(153, 53%, 53%);
+  border-color: hsl(153, 53%, 53%);
+  color: #fff;
+}
+.bbr-timeline.is-success .bbr-timeline-connector {
+  background: rgba(71.6295, 198.6705, 141.50205, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-success .bbr-timeline-marker {
+  background: hsl(153, 53%, 53%);
+  border-color: hsl(153, 53%, 53%);
+  color: #fff;
+}
+.bbr-timeline.is-warning .bbr-timeline-marker {
+  background: hsl(44, 100%, 77%);
+  border-color: hsl(44, 100%, 77%);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-timeline.is-warning .bbr-timeline-connector {
+  background: rgba(255, 223.72, 137.7, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-warning .bbr-timeline-marker {
+  background: hsl(44, 100%, 77%);
+  border-color: hsl(44, 100%, 77%);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-timeline.is-danger .bbr-timeline-marker {
+  background: hsl(348, 86%, 61%);
+  border-color: hsl(348, 86%, 61%);
+  color: #fff;
+}
+.bbr-timeline.is-danger .bbr-timeline-connector {
+  background: rgba(241.077, 70.023, 104.2338, 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-danger .bbr-timeline-marker {
+  background: hsl(348, 86%, 61%);
+  border-color: hsl(348, 86%, 61%);
+  color: #fff;
+}