pcm-shared-components 2.0.14 → 2.0.16

package/dist/components/Timelines/ReservationTimelineComponent/css/styles.css

@@ -0,0 +1,121 @@
+
+.blink {
+    border: solid 1px orangered;
+    color: orangered;
+    animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
+    box-shadow: 0 2.8px 2.2px rgba(250, 104, 60, 0.034), 0 6.7px 5.3px rgba(250, 104, 60, 0.048), 0 12.5px 10px rgba(250, 104, 60, 0.06), 0 22.3px 17.9px rgba(250, 104, 60, 0.072), 0 41.8px 33.4px rgba(250, 104, 60, 0.086), 0 100px 80px rgba(250, 104, 60, 0.12);
+}
+@keyframes blinker {
+    from {
+        opacity: 1;
+   }
+    to {
+        opacity: 0;
+   }
+}
+.rct-item {
+    border-radius: 20px;
+    border-color: rgba(0, 0, 0, 0.5) !important;
+    color: #000;
+}
+.item_collision .rct-item-content {
+    color: white !important;
+    font-weight: 900;
+}
+.item_collision {
+    background-size: auto auto;
+    background-color: rgba(193, 45, 45, 1);
+    background-image: repeating-linear-gradient(45deg, #f56f6f, #f56f6f 12px, rgba(236, 93, 93, 1) 12px, rgba(236, 93, 93, 1) 20px) !important;
+}
+.edit_res_id {
+    border: solid 2.5px #f79902 !important;
+    box-shadow: 0 2.8px 2.2px rgba(37, 37, 37, 0.044), 0 6.7px 5.3px rgba(37, 37, 37, 0.058), 0 12.5px 10px rgba(37, 37, 37, 0.16), 0 22.3px 17.9px rgba(37, 37, 37, 0.082), 0 41.8px 33.4px rgba(37, 37, 37, 0.096), 0 100px 80px rgba(37, 37, 37, 0.22);
+}
+.sidebar-group {
+    line-height: 1;
+}
+.rct-dateHeader {
+    font-size: 12pt !important;
+}
+.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-6, .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-0 {
+    background-color: rgba(248, 147, 31, 0.5);
+}
+.rct-item-content {
+    color: black;
+}
+.move-icon {
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+    height: 20px;
+    width: 20px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    border: solid 1px;
+    border-color: rgba(0, 0, 0, 0.5) !important;
+    box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.493);
+}
+.rct-item-handler {
+    cursor: col-resize !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.rct-item-handler .handle-icon {
+    height: 35%;
+    position: relative;
+    pointer-events: none;
+}
+.rct-item-handler .handle-icon, .rct-item-handler .handle-icon:before, .rct-item-handler .handle-icon:after {
+    width: 1px;
+    background: rgba(54, 54, 54, 0.9);
+}
+.rct-item-handler .handle-icon:before, .rct-item-handler .handle-icon:after {
+    content: '';
+    height: 100%;
+    display: block;
+    position: absolute;
+}
+.rct-item-handler .handle-icon:before {
+    right: 4px;
+}
+.rct-item-handler .handle-icon:after {
+    left: 4px;
+}
+.rct-item-content {
+    line-height: 1.2;
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+    max-height: 12px;
+}
+.rct-item-tooltip {
+    z-index: 2000;
+    margin-left: 5px;
+    display: flex;
+    align-items: center;
+}
+.rct-item-tooltip-content {
+    background: rgba(27, 25, 24, 0.726);
+    padding: 8px 16px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: white;
+    border-radius: 5px;
+}
+.rct-item--is-selected .rct-item-content {
+    color: rgba(0, 0, 0, 0.8);
+}
+.rct-item--is-selected .rct-item {
+    border-color: rgba(0, 0, 0, 0.5) !important;
+    box-shadow: 0 8px 8px -8px black;
+}
+.rct-item-following-indicator {
+    opacity: 0;
+    transition: opacity 500ms ease;
+}
+.rct-item--is-resizing .rct-item-following-indicator {
+    opacity: 1;
+}

package/dist/components/Timelines/ReservationTimelineComponent/css/styles.old

@@ -0,0 +1,209 @@
+.timeline-app {
+    font-family: sans-serif;
+    font-size: large;
+    text-align: center;
+    max-width: 100%;
+    max-height:90vh !important;
+    height:90vh !important;
+    padding: 0 16px;
+    overflow: scroll;
+    // margin: auto;
+    
+  }
+  
+
+
+.blink{
+    border: solid 1px orangered;
+    color: orangered;
+    animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate; 
+    box-shadow:
+    0 2.8px 2.2px rgba(250, 104, 60, 0.034),
+    0 6.7px 5.3px rgba(250, 104, 60, 0.048),
+    0 12.5px 10px rgba(250, 104, 60, 0.06),
+    0 22.3px 17.9px rgba(250, 104, 60, 0.072),
+    0 41.8px 33.4px rgba(250, 104, 60, 0.086),
+    0 100px 80px rgba(250, 104, 60, 0.12)
+    ;
+  }
+  @keyframes blinker {  
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+  
+  
+  
+  
+  .rct-item{
+    border-radius:20px;
+    border-color: rgba(0, 0, 0, 0.5) !important;
+    color: #000000;
+
+}
+.item_collision .rct-item-content{
+
+    color:white !important;
+    font-weight: 900;
+}
+.item_collision{
+
+    background-size: auto auto;
+background-color: rgba(193, 45, 45, 1);
+background-image: repeating-linear-gradient(45deg, rgb(245, 111, 111), rgb(245, 111, 111) 12px, rgba(236, 93, 93, 1) 12px, rgba(236, 93, 93, 1) 20px ) !important;
+    // background-image: linear-gradient(38deg, #f58e8e 25%, #e67373 25%, #e67373 50%, #f58e8e 50%, #f58e8e 75%, #e67373 75%, #e67373 50%) !important;
+}
+
+
+// In edit mode the reservation ID being edited will look different
+.edit_res_id{
+
+  border: solid 2.5px rgb(247, 153, 2) !important;
+  box-shadow:
+    0 2.8px 2.2px rgba(37, 37, 37, 0.044),
+    0 6.7px 5.3px rgba(37, 37, 37, 0.058),
+    0 12.5px 10px rgba(37, 37, 37, 0.16),
+    0 22.3px 17.9px rgba(37, 37, 37, 0.082),
+    0 41.8px 33.4px rgba(37, 37, 37, 0.096),
+    0 100px 80px rgba(37, 37, 37, 0.22)
+    ;
+}
+  
+  
+  .sidebar-group {
+    line-height: 1;
+  }
+  
+.rct-dateHeader {
+      font-size: 12pt !important;
+  }
+  
+  .react-calendar-timeline .rct-horizontal-lines .rct-hl-even{
+    // border-color: solid 5px red;
+    // background-color:red;
+  }
+  .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd{
+    // background-color:red;
+  }
+  
+  // Timeline styles overrides
+  $weekend: rgba(248, 147, 31, 0.5);
+  
+  .react-calendar-timeline {
+    .rct-vertical-lines {
+      .rct-vl {
+        &.rct-day-6,
+        &.rct-day-0 {
+          background-color: $weekend;
+        }
+      }
+    }
+  }
+
+  .rct-item-content{
+      color:black;
+  }
+
+  
+  $handle-color: rgba(54, 54, 54, 0.9);
+  
+  //move icon
+  
+  .move-icon{
+    // cursor: move; /* fallback if grab cursor is unsupported */
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+  
+    height: 20px;
+    width: 20px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    position: absolute;
+    top: 8px; left: 5px;
+    border: solid 1px;
+
+    border-color:rgba(0, 0, 0, 0.5) !important;
+  box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.493);
+  }
+  
+  // Handle
+  
+  .rct-item-handler {
+    cursor: col-resize !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+  
+    .handle-icon {
+      height: 35%;
+      position: relative;
+      pointer-events: none;
+      
+      
+      &, &:before, &:after {
+        width: 1px;
+        background: $handle-color;
+      }
+  
+      &:before, &:after {
+        content: '';
+        height: 100%;
+        display: block;
+        position: absolute;
+      }
+  
+      // Controls th spacing between the grips handles
+      &:before {
+        right: 4px;
+      }
+  
+      &:after {
+        left: 4px;
+      }
+    }
+  }
+
+  //controls the way the text appears in the timeline items...
+  .rct-item-content {
+    line-height:1.1;
+    // height:100%;
+    margin-top: 8px !important;
+    max-height: 10px;
+  }
+  
+  // Following tooltip
+  .rct-item-tooltip {
+    z-index: 2000;
+    margin-left: 5px;
+    display: flex;
+    align-items: center;
+  }
+
+  .rct-item-tooltip-content {
+    background: rgba(27, 25, 24, 0.726);
+    padding: 8px 16px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: white;
+    border-radius: 5px;
+  }
+  
+  .rct-item--is-selected .rct-item-content{
+    color: rgba(0, 0, 0, 0.8);
+  }
+  .rct-item--is-selected .rct-item{
+  border-color:rgba(0, 0, 0, 0.5) !important;
+  box-shadow: 0 8px 8px -8px black;
+  }
+  
+  .rct-item-following-indicator {
+    opacity: 0;
+    transition: opacity 500ms ease;
+    
+    .rct-item--is-resizing & {
+      opacity: 1;
+    }
+  }
+  
+