@haiilo/catalyst 5.4.0 → 6.0.0

package/dist/collection/components/cat-datepicker/cat-datepicker.css

@@ -3,379 +3,16 @@
  */
 /* stylelint-disable value-keyword-case */
 /* stylelint-enable value-keyword-case */
-.datepicker {
-  width: min-content;
-}
-.datepicker:not(.active) {
-  display: none;
-}
-
-.datepicker-dropdown {
-  position: absolute;
-  z-index: 20;
-  padding-top: 4px;
-}
-.datepicker-dropdown.datepicker-orient-top {
-  padding-top: 0;
-  padding-bottom: 4px;
-}
-
-.datepicker-picker {
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--cat-border-radius-m, 0.25rem);
-  background-color: white;
-}
-.datepicker-dropdown .datepicker-picker {
-  box-shadow: 0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);
-}
-
-.datepicker-main {
-  flex: auto;
-  padding: 2px;
-}
-
-.datepicker-footer {
-  box-shadow: none;
-  background-color: transparent;
-}
-
-.datepicker-title {
-  box-shadow: none;
-  background-color: hsl(0, 0%, 96%);
-  padding: 0.375rem 0.75rem;
-  text-align: center;
-  font-weight: 700;
-}
-
-.datepicker-controls {
-  display: flex;
-}
-.datepicker-header .datepicker-controls {
-  padding: 2px 2px 0;
-}
-.datepicker-controls .button {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  border: 1px solid rgb(var(--cat-border-color, 235, 236, 240));
-  border-radius: var(--cat-border-radius-m, 0.25rem);
-  box-shadow: none;
-  background-color: hsl(0, 0%, 100%);
-  cursor: pointer;
-  padding: calc(0.375em - 1px) 0.75em;
-  height: 2.25em;
-  vertical-align: top;
-  text-align: center;
-  line-height: 1.5;
-  white-space: nowrap;
-  color: hsl(0, 0%, 21%);
-  font-size: 0.9375rem;
-}
-.datepicker-controls .button:focus, .datepicker-controls .button:active {
-  outline: none;
-}
-.datepicker-controls .button:hover {
-  border-color: #b8b8b8;
-  color: hsl(0, 0%, 21%);
-}
-.datepicker-controls .button:focus {
-  border-color: hsl(217, 71%, 53%);
-  color: hsl(0, 0%, 21%);
-}
-.datepicker-controls .button:focus:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
-}
-.datepicker-controls .button:active {
-  border-color: #474747;
-  color: hsl(0, 0%, 21%);
-}
-.datepicker-controls .button[disabled] {
-  cursor: not-allowed;
-}
-.datepicker-header .datepicker-controls .button {
-  border-color: transparent;
-  font-weight: bold;
-}
-.datepicker-header .datepicker-controls .button:hover {
-  background-color: #f2f4f7;
-}
-.datepicker-header .datepicker-controls .button:active {
-  background-color: #f2f4f7;
-}
-.datepicker-footer .datepicker-controls .button {
-  flex: auto;
-  margin: calc(0.375rem - 1px) 0.375rem;
-  border-radius: var(--cat-border-radius-s, 0.125rem);
-  font-size: 0.875rem;
-}
-.datepicker-controls .view-switch {
-  flex: auto;
-}
-.datepicker-controls .prev-button,
-.datepicker-controls .next-button {
-  padding-right: 0.375rem;
-  padding-left: 0.375rem;
-  flex: 0 0 14.2857142857%;
-}
-.datepicker-controls .prev-button.disabled,
-.datepicker-controls .next-button.disabled {
-  visibility: hidden;
-}
-
-.datepicker-view,
-.datepicker-grid {
+:host {
   display: flex;
+  margin-bottom: 1rem;
 }
 
-.datepicker-view {
-  align-items: stretch;
-  width: 17.5rem;
-}
-
-.datepicker-grid {
-  flex-wrap: wrap;
-  flex: auto;
-}
-
-.datepicker .days {
-  display: flex;
-  flex-direction: column;
-  flex: auto;
-}
-.datepicker .days-of-week {
-  display: flex;
-}
-.datepicker .week-numbers {
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 9.6774193548%;
-}
-.datepicker .weeks {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  flex: auto;
-}
-.datepicker span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--cat-border-radius-m, 0.25rem);
-  cursor: default;
-  -webkit-touch-callout: none;
-  user-select: none;
-}
-.datepicker .dow {
-  height: 2rem;
-  font-size: 0.875rem0.9375rem/2;
-  font-weight: 700;
-}
-.datepicker .week {
-  flex: auto;
-  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
-  font-size: 0.875rem;
-}
-
-.datepicker-cell, .datepicker .days .dow {
-  flex-basis: 14.2857142857%;
-}
-
-.datepicker-cell {
-  height: 2.5rem;
-}
-.datepicker-cell:not(.day) {
-  flex-basis: 25%;
-  height: 5rem;
-}
-.datepicker-cell:not(.disabled):hover {
-  background-color: transparent;
-  cursor: pointer;
-}
-.datepicker-cell.focused:not(.selected) {
-  background-color: #f2f4f7;
-}
-.datepicker-cell.selected, .datepicker-cell.selected:hover {
-  background-color: rgb(var(--cat-primary-bg, 0, 129, 148));
-  color: rgb(var(--cat-primary-fill, 255, 255, 255));
-  font-weight: 700;
-}
-.datepicker-cell.disabled {
-  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
-}
-.datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) {
-  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
-}
-.datepicker-cell.prev.selected, .datepicker-cell.next.selected {
-  color: rgb(var(--cat-primary-fill, 255, 255, 255));
-}
-.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
-  border-radius: 0;
-  background-color: #f2f4f7;
-}
-.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
-  background-color: #f2f4f7;
-}
-.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
-  background-color: #f2f4f7;
-}
-.datepicker-cell.today:not(.selected) {
-  background-color: transparent;
-}
-.datepicker-cell.today:not(.selected):not(.disabled) {
-  color: rgb(var(--cat-primary-text, 0, 129, 148));
-}
-.datepicker-cell.today.focused:not(.selected) {
-  background-color: #f2f4f7;
-}
-.datepicker-cell.range-end:not(.selected), .datepicker-cell.range-start:not(.selected) {
-  background-color: #b8b8b8;
-  color: rgb(var(--cat-primary-fill, 255, 255, 255));
-}
-.datepicker-cell.range-end.focused:not(.selected), .datepicker-cell.range-start.focused:not(.selected) {
-  background-color: #b3b3b3;
-}
-.datepicker-cell.range-start:not(.range-end) {
-  border-radius: var(--cat-border-radius-m, 0.25rem) 0 0 var(--cat-border-radius-m, 0.25rem);
-}
-.datepicker-cell.range-end:not(.range-start) {
-  border-radius: 0 var(--cat-border-radius-m, 0.25rem) var(--cat-border-radius-m, 0.25rem) 0;
-}
-.datepicker-cell.range {
-  border-radius: 0;
-  background-color: gainsboro;
-}
-.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
-  background-color: #d7d7d7;
-}
-.datepicker-cell.range.disabled {
-  color: #c6c6c6;
-}
-.datepicker-cell.range.focused {
-  background-color: #d1d1d1;
-}
-
-.datepicker-input.in-edit {
-  border-color: #276bda;
-}
-.datepicker-input.in-edit:focus, .datepicker-input.in-edit:active {
-  box-shadow: none;
-}
-
-.datepicker-picker {
-  border: 1px solid rgb(var(--cat-border-color, 235, 236, 240));
-}
-
-.datepicker-main {
-  padding: 0.5rem 1rem;
-}
-
-.datepicker-view:has(.week-numbers) {
-  width: 19.375rem;
-}
-
-.datepicker-view.months,
-.datepicker-view.years {
-  width: 20rem;
-}
-
-.datepicker .dow,
-.datepicker .week {
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 700;
-  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
-}
-
-.datepicker-cell.today:not(.selected) {
-  box-shadow: inset 0 0 0 2px rgb(var(--cat-primary-bg, 0, 129, 148));
-}
-
-.datepicker-cell.focused:not(.selected),
-.datepicker-cell:not(.selected):not(.disabled):hover {
-  background-color: #f2f4f7;
+:host([hidden]) {
+  display: none;
 }
 
-.datepicker-controls {
-  gap: 0.5rem;
-}
-.datepicker-header .datepicker-controls {
-  padding: 1rem 1rem 0;
-}
-.datepicker-header .datepicker-controls .button {
-  height: 2.5rem;
-}
-.datepicker-header .datepicker-controls .prev-button,
-.datepicker-header .datepicker-controls .next-button {
-  flex-basis: 2.5rem;
-  font-size: 1.25rem;
-}
-.datepicker-footer .datepicker-controls {
-  padding: 0 1rem 1rem;
-}
-.datepicker-footer .datepicker-controls .button {
+cat-input {
+  flex: 1 1 auto;
   margin: 0;
-  height: 2.5rem;
-  font-size: 0.9375rem;
-}
-.datepicker-footer .datepicker-controls .button:hover, .datepicker-footer .datepicker-controls .button:active {
-  border-color: rgb(var(--cat-border-color-dark, 215, 219, 224));
-}
-
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1)::before {
-  content: "";
-  width: 700%;
-  height: 100%;
-  border-radius: var(--cat-border-radius-m, 0.25rem);
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).today:not(.selected)::before {
-  box-shadow: inset 0 0 0 1.5px #008194;
-  border-radius: var(--cat-border-radius-m, 0.25rem);
-  opacity: 1;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1):not(:hover)::before {
-  background: none;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1):hover::before {
-  opacity: 1;
-  background-color: transparent;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected, .datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected.focused {
-  color: white;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected::before, .datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected.focused::before {
-  opacity: 1;
-  background-color: rgb(var(--cat-primary-bg, 0, 129, 148));
-  z-index: -1;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).focused {
-  background: none;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).focused::before {
-  opacity: 1;
-  background-color: #f2f4f7;
-  z-index: -1;
-}
-
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell {
-  position: relative;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.selected, .datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.focused {
-  z-index: 2;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.today:not(.selected) {
-  box-shadow: none;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell:not(.disabled):hover {
-  background-color: inherit;
-}
-.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.focused {
-  background: none;
 }