@vitrosoftware/common-ui-ts 1.1.252 → 1.1.254

package/css/std/controls/date-picker/date-picker.css

@@ -81,16 +81,16 @@
     display: none;
 }
 
-:global(.k-datepicker) {
+:global(.k-datepicker),
+:global(.k-datetimepicker) {
     width: 100% !important;
 }
 
 .vitro-calendar-container {
     width: 280px;
-    height: 316px;
+    height: 326px;
     box-shadow: none !important;
     background-color: transparent;
-    border-radius: 4px;
     padding: 4px 0;
     border: none;
 }
@@ -98,6 +98,7 @@
 .vitro-calendar-container > div {
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
     background-color: #fff;
+    border-radius: 4px;
 }
 
 :global(.k-calendar) {
@@ -129,7 +130,8 @@
     border-color: #D13438 !important;
 }
 
-:global(.k-i-calendar) {
+:global(.k-i-calendar),
+:global(.k-datetimepicker .k-i-clock) {
     height: 20px !important;
     width: 20px !important;
     display: flex !important;
@@ -137,7 +139,8 @@
     justify-content: center;
 }
 
-:global(.k-i-calendar)::before {
+:global(.k-i-calendar)::before,
+:global(.k-datetimepicker .k-i-clock)::before {
     content: '' !important;
     display: inline-block;
     height: 18px;
@@ -179,7 +182,7 @@
     height: 24px !important;
     width: 24px !important;
     border-radius: 2px;
-    color: #222D44 !important;
+    color: #222D44;
     opacity: 1 !important;
 }
 
@@ -220,9 +223,9 @@
     color: #fff !important;
 }
 
-:global(.k-state-hover .k-link) {
-    background-color: #DCEEFF !important;
-    border-radius: 2px !important;
+:global(.k-calendar .k-state-hover .k-link) {
+    background-color: #DCEEFF;
+    border-radius: 2px;
 }
 
 :global(.k-header) {
@@ -248,26 +251,41 @@
     background: #fff !important;
 }
 
-:global(.k-nav-prev) span {
+:global(.k-prev-view):hover,
+:global(.k-next-view):hover {
+    color: transparent !important;
+}
+
+:global(.k-nav-prev) span,
+:global(.k-prev-view) span {
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/date-picker/img/collapse-left-grey.svg');
     width: 22px;
     height: 22px;
+    flex-shrink: 0;
 }
 
-:global(.k-nav-next) span {
+:global(.k-nav-next) span,
+:global(.k-next-view) span {
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/date-picker/img/collapse-right-grey.svg');
     width: 22px;
     height: 22px;
+    flex-shrink: 0;
 }
 
 :global(.k-nav-prev) span::before,
-:global(.k-nav-next) span::before {
+:global(.k-nav-next) span::before,
+:global(.k-prev-view) span::before,
+:global(.k-next-view) span::before,
+:global(.k-nav-prev)::before,
+:global(.k-nav-next)::before,
+:global(.k-prev-view)::before,
+:global(.k-next-view)::before {
     display: none;
 }
 
@@ -287,4 +305,205 @@
     height: unset !important;
     width: unset !important;
     padding: 10px 0 !important;
+}
+
+.vitro-calendar-container :global(.k-calendar .k-state-focused .k-link),
+.vitro-calendar-container :global(.k-calendar .k-state-focused.k-state-hover .k-link) {
+    background: #347FDE;
+    color: #fff !important;
+    box-shadow: none;
+}
+
+.vitro-calendar-container :global(.k-calendar .k-link) {
+    color: #222D44;
+}
+
+.vitro-calendar-container :global(.k-calendar-header) {
+    height: 40px;
+}
+
+.vitro-calendar-container :global(.k-datetime-footer) {
+    display: none;
+}
+
+.vitro-calendar-container :global(.k-datetime-wrap) {
+    width: 280px;
+}
+
+.vitro-calendar-container :global(.k-datetime-calendar-wrap),
+.vitro-calendar-container :global(.k-datetime-time-wrap) {
+    flex: 0 0 100%;
+}
+
+.vitro-calendar-container :global(.k-today),
+.vitro-calendar-container :global(.k-nav-today) {
+    color: #347FDE !important;
+    font-size: 14px;
+    line-height: 21px;
+}
+
+.vitro-calendar-container :global(.k-datetime-buttongroup .k-button) {
+    font-family: 'InterRegular';
+    color: #4A556C;
+    font-size: 14px;
+    line-height: 150%;
+    padding: 0 12px 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: #fff;
+    box-shadow: none;
+    border: none;
+    border-bottom: 1px solid #E4E6EC;
+}
+
+.vitro-calendar-container :global(.k-datetime-buttongroup .k-button.k-state-active) {
+    color: #3274E0;
+    background-color: #fff;
+    background-image: none;
+    box-shadow: none;
+    border: none;
+    border-bottom: 2px solid #3274E0;
+    padding: 0 12px 15px;
+}
+
+.vitro-calendar-container :global(.k-datetime-buttongroup) {
+    padding: 16px 16px 0 16px;
+}
+
+.vitro-calendar-container :global(.k-picker-wrap > .k-select) {
+    background: transparent !important;
+    margin-right: 16px;
+    width: 20px;
+    height: 20px;
+    align-self: center;
+}
+
+.vitro-calendar-container :global(.k-picker-wrap.k-state-focused),
+.vitro-calendar-container :global(.k-picker-wrap.k-state-active) {
+    box-shadow: none !important;
+}
+
+.vitro-calendar-container :global(.k-calendar-header .k-title) {
+    color: #222D44;
+    font-weight: unset;
+    font-size: 14px;
+    padding: 0 8px;
+}
+
+.vitro-calendar-container :global(.k-calendar-header .k-title::before) {
+    display: none;
+}
+
+.vitro-calendar-container :global(.k-time-header .k-title) {
+    font-weight: unset;
+    font-family: 'InterMedium';
+    font-size: 18px;
+    line-height: 27px;
+    color: #222D44;
+}
+
+.vitro-calendar-container :global(.k-time-container .k-item:hover) {
+    font-family: 'InterMedium';
+}
+
+.vitro-calendar-container :global(.k-time-highlight) {
+    border-color: #C0CAD5;
+}
+
+.vitro-calendar-container :global(.k-time-list)::after,
+.vitro-calendar-container :global(.k-time-list)::before {
+    box-shadow: 0 12px 30px 60px #fff;
+}
+
+.vitro-calendar-container :global(.k-time-list-wrapper.k-state-focused) {
+    background-color: #DCEEFF;
+    font-family: 'InterMedium';
+}
+
+.vitro-calendar-container :global(.k-time-list-wrapper.k-state-focused)::before,
+.vitro-calendar-container :global(.k-time-list-wrapper.k-state-focused)::after {
+    display: none;
+}
+
+.vitro-calendar-container :global(.k-time-list-wrapper) {
+    background-color: #FFF;
+    width: 85px;
+    height: 182px;
+    margin-top: 1px;
+}
+
+.vitro-calendar-container :global(.k-time-list-wrapper .k-title) {
+    font-family: 'InterRegular';
+    color: #222D44;
+    background-color: #FFF !important;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    opacity: 1 !important;
+}
+
+.vitro-calendar-container :global(.k-time-list-container) {
+    justify-content: center;
+}
+
+.vitro-calendar-container :global(.k-time-header) {
+    height: 40px;
+    padding: 8px 24px;
+}
+
+.vitro-calendar-container :global(.k-time-footer) {
+    border-top: 1px solid #E4E6EC;
+    margin-top: 0 !important;
+}
+
+.vitro-calendar-container :global(.k-time-now) {
+    border-radius: 4px !important;
+    color: #347FDE !important;
+    font-size: 14px !important;
+    line-height: 21px;
+    outline: none !important;
+}
+
+.vitro-calendar-container :global(.k-time-now):hover::before {
+    display: none;
+}
+
+.vitro-calendar-container :global(.k-action-buttons .k-button) {
+    background: #fff;
+    border-bottom-left-radius: 4px;
+    font-size: 14px;
+    line-height: 21px;
+    padding: 8px !important;
+    font-family: 'InterMedium';
+    color: #222D44;
+}
+
+.vitro-calendar-container :global(.k-action-buttons .k-primary) {
+    background: #347FDE;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 4px !important;
+    color: white !important;
+}
+
+.vitro-calendar-container :global(.k-action-buttons .k-primary:hover) {
+    background: #3274E0;
+    border-color: #3274E0;
+}
+
+.vitro-calendar-container :global(.k-time-cancel):hover {
+    background: #F3F8FF !important;
+    background-image: none;
+}
+
+.vitro-calendar-container :global(.k-item) {
+    width: 85px;
+}
+
+.vitro-calendar-container :global(.k-item span) {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 21px;
 }

package/css/std/controls/field-iterator/field-iterator.css

@@ -74,4 +74,15 @@
     gap: 22px 16px;
     display: flex;
     flex-direction: column;
+}
+
+.vitro-field-iterator-group :global(.vitro-content) {
+    display: flex;
+    flex-wrap: wrap;
+    grid-gap: 22px 16px;
+    align-content: flex-start;
+}
+
+.vitro-label {
+    margin: 0;
 }

package/css/std/controls/table-view/table-view-custom-date-edit.css

@@ -48,4 +48,22 @@
 .vitro-table-view-gantt .TWMain .TWDatesBottom {
     background-size: 20px;
     background-position: center;
+}
+
+.table-view-custom-date-edit-date-picker {
+    display: none;
+}
+
+.table-view-custom-date-edit .k-animation-container {
+    position: initial !important;
+    left: initial !important;
+    top: initial !important;
+}
+
+.table-view-custom-date-edit .k-datetime-container {
+    padding: 0;
+}
+
+.table-view-custom-date-edit .k-datetime-container > .k-datetime-wrap {
+    box-shadow: none;
 }