cmat 0.0.3 → 0.0.4

package/components/material-color-picker/material-color-picker.component.scss

@@ -1,5 +0,0 @@
-cmat-material-color-picker {
-    .mat-mdc-select-arrow-wrapper {
-        display: none !important;
-    }
-}

package/components/material-datetimepicker/calendar-body.scss

@@ -1,58 +0,0 @@
-@use 'sass:math';
-
-$calendar-body-label-padding-start: 5% !default;
-$calendar-body-label-side-padding: math.div(33%, 7) !default;
-$calendar-body-cell-min-size: 32px !default;
-$calendar-body-cell-size: math.div(100%, 7) !default;
-$calendar-body-cell-padding: math.div($calendar-body-cell-size, 2) !default;
-$calendar-body-cell-content-margin: 5% !default;
-$calendar-body-cell-content-border-width: 1px !default;
-$calendar-body-cell-radius: 999px !default;
-
-$calendar-body-min-size: 7 * $calendar-body-cell-min-size !default;
-$calendar-body-cell-content-size: 100% - $calendar-body-cell-content-margin * 2 !default;
-
-.cmat-datetimepicker-calendar-body {
-    min-width: $calendar-body-min-size;
-}
-
-.cmat-datetimepicker-calendar-body-label {
-    height: 0;
-    line-height: 0;
-    text-align: left;
-    padding: $calendar-body-cell-padding $calendar-body-label-side-padding;
-
-    [dir='rtl'] & {
-        text-align: right;
-    }
-}
-
-.cmat-datetimepicker-calendar-body-cell {
-    position: relative;
-    width: $calendar-body-cell-size;
-    height: 0;
-    line-height: 0;
-    padding: $calendar-body-cell-padding 0;
-    text-align: center;
-    outline: none;
-    cursor: pointer;
-}
-
-.cmat-datetimepicker-calendar-body-disabled {
-    cursor: default;
-    pointer-events: none;
-}
-
-.cmat-datetimepicker-calendar-body-cell-content {
-    position: absolute;
-    top: $calendar-body-cell-content-margin;
-    left: $calendar-body-cell-content-margin;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: $calendar-body-cell-content-size;
-    height: $calendar-body-cell-content-size;
-    border: $calendar-body-cell-content-border-width solid transparent;
-    border-radius: $calendar-body-cell-radius;
-}

package/components/material-datetimepicker/calendar.scss

@@ -1,194 +0,0 @@
-$calendar-padding: 8px !default;
-
-// We use the same padding as the month / year label, but subtract 16px since there is padding
-// between the edge of the button and the text. This ensures that the button text lines up with
-// the month / year label text.
-$calendar-controls-side-margin: calc(33% / 7 - 16px);
-
-// Values chosen to approximate https://material.io/icons/#ic_navigate_before and
-// https://material.io/icons/#ic_navigate_next as closely as possible.
-$calendar-prev-next-icon-border-width: 2px;
-$calendar-prev-next-icon-margin: 15.5px;
-$calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
-$calendar-next-icon-transform: translateX(-2px) rotate(45deg);
-
-@mixin landscape-calendar-header {
-    .cmat-datetimepicker-calendar {
-        display: flex;
-
-        .cmat-datetimepicker-calendar-header {
-            width: 150px;
-            min-width: 150px;
-            padding: 16px 8px;
-            border-radius: 4px 0 0 4px;
-
-            [dir='rtl'] & {
-                border-radius: 0 4px 4px 0;
-            }
-        }
-
-        .cmat-datetimepicker-calendar-header-year+.cmat-datetimepicker-calendar-header-date-time,
-        .cmat-datetimepicker-calendar-header-date+.cmat-datetimepicker-calendar-header-time {
-            margin-top: 12px;
-        }
-
-        .cmat-datetimepicker-calendar-header-date-time {
-            font-size: 28px;
-            flex-direction: column;
-        }
-
-        .cmat-datetimepicker-calendar-header-time {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .cmat-datetimepicker-calendar-header-ampm-container {
-            flex-direction: row;
-            font-size: 24px;
-        }
-
-        .cmat-datetimepicker-calendar-header-ampm {
-            padding: 4px;
-
-            +.cmat-datetimepicker-calendar-header-ampm {
-                margin: 0 8px;
-            }
-        }
-    }
-}
-
-.cmat-datetimepicker-calendar {
-    display: block;
-    outline: none;
-}
-
-.cmat-datetimepicker-calendar-header {
-    box-sizing: border-box;
-    padding: 8px;
-    border-radius: 4px 4px 0 0;
-
-    .header-button {
-        color: white !important;
-        padding: 0 4px;
-        font-size: inherit;
-        white-space: normal;
-        word-break: break-word;
-        font-weight: 500;
-        cursor: pointer;
-    }
-}
-
-.cmat-datetimepicker-calendar-header-year.header-button {
-    font-size: 26px;
-    line-height: 24px;
-}
-
-.cmat-datetimepicker-calendar-header-date-time {
-    font-size: 24px;
-    line-height: 36px;
-    display: flex;
-    flex-direction: row;
-}
-
-.cmat-datetimepicker-calendar-header-year,
-.cmat-datetimepicker-calendar-header-date,
-.cmat-datetimepicker-calendar-header-hours,
-.cmat-datetimepicker-calendar-header-minutes,
-.cmat-datetimepicker-calendar-header-ampm {
-    &:not(.active) {
-        opacity: .6;
-    }
-
-    &.not-clickable {
-        cursor: initial;
-    }
-}
-
-.cmat-datetimepicker-calendar-header-time {
-    display: inline-flex;
-
-    &:not(.active) {
-        opacity: .6;
-
-        .cmat-datetimepicker-calendar-header-hours,
-        .cmat-datetimepicker-calendar-header-minutes,
-        .cmat-datetimepicker-calendar-header-ampm {
-            opacity: 1;
-        }
-    }
-}
-
-.cmat-datetimepicker-calendar-header-hour-minute-separator {
-    display: inline-block;
-    width: 8px;
-    text-align: center;
-}
-
-.cmat-datetimepicker-calendar-header-ampm-container {
-    display: inline-flex;
-    flex-direction: column;
-    line-height: 18px;
-    font-size: 12px;
-}
-
-[mode='landscape'] {
-    @include landscape-calendar-header;
-}
-
-@media all and (orientation: landscape) {
-    [mode='auto'] {
-        @include landscape-calendar-header;
-    }
-}
-
-.cmat-datetimepicker-calendar-content {
-    width: 100%;
-    padding: $calendar-padding;
-    outline: none;
-    box-sizing: border-box;
-    overflow: hidden;
-}
-
-.cmat-datetimepicker-calendar-controls {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 $calendar-controls-side-margin;
-}
-
-.cmat-datetimepicker-calendar-period-button {
-    display: inline-block;
-    height: 40px;
-    line-height: 40px;
-    outline: none;
-    border: 0;
-    background: transparent;
-    box-sizing: border-box;
-}
-
-.cmat-datetimepicker-calendar-previous-button,
-.cmat-datetimepicker-calendar-next-button {
-    &.disabled {
-        pointer-events: none;
-    }
-
-    svg {
-        fill: currentColor;
-        vertical-align: top;
-
-        [dir='rtl'] & {
-            transform: rotate(180deg);
-        }
-    }
-}
-
-.cmat-datetimepicker-calendar-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-    width: 100%;
-}
-
-.cmat-datetimepicker-calendar-table-header th {
-    text-align: center;
-    padding: $calendar-padding 0;
-}
-

package/components/material-datetimepicker/clock.scss

@@ -1,90 +0,0 @@
-$clock-min-size: 224px !default;
-$clock-margin: 12px !default;
-$clock-cell-size: 14.1666% !default;
-
-.cmat-datetimepicker-clock {
-    position: relative;
-    display: block;
-    min-width: $clock-min-size;
-    margin: $clock-margin;
-    box-sizing: border-box;
-    user-select: none;
-}
-
-.cmat-datetimepicker-clock-wrapper {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding-top: 100%;
-    border-radius: 50%;
-}
-
-.cmat-datetimepicker-clock-center {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 2%;
-    height: 2%;
-    margin: -1%;
-    border-radius: 50%;
-}
-
-.cmat-datetimepicker-clock-hand {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 1px;
-    margin: 0 auto;
-    transform-origin: bottom;
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: -4px;
-        left: -4px;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-    }
-}
-
-.cmat-datetimepicker-clock-hours,
-.cmat-datetimepicker-clock-minutes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    visibility: hidden;
-    transition: 350ms;
-    transform: scale(1.2);
-
-    &.active {
-        opacity: 1;
-        visibility: visible;
-        transform: scale(1);
-    }
-}
-
-.cmat-datetimepicker-clock-minutes {
-    transform: scale(.8);
-}
-
-.cmat-datetimepicker-clock-cell {
-    position: absolute;
-    display: flex;
-    width: $clock-cell-size;
-    height: $clock-cell-size;
-    justify-content: center;
-    box-sizing: border-box;
-    border-radius: 50%;
-    align-items: center;
-    cursor: pointer;
-
-    &.cmat-datetimepicker-clock-cell-disabled {
-        pointer-events: none;
-    }
-}

package/components/material-datetimepicker/datetimepicker-content.scss

@@ -1,151 +0,0 @@
-$calendar-padding: 8px;
-$non-touch-calendar-cell-size: 40px;
-$non-touch-calendar-portrait-width: $non-touch-calendar-cell-size * 7 + $calendar-padding * 2;
-$non-touch-calendar-portrait-height: 424px;
-$non-touch-calendar-landscape-width: 446px;
-$non-touch-calendar-landscape-height: 328px;
-$non-touch-calendar-with-time-input-portrait-height: 490px;
-$non-touch-calendar-with-time-input-landscape-height: 412px;
-
-// Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
-// these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
-// the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
-// chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
-// scrollbars at smaller sizes.
-$touch-landscape-mode-landscape-width: 120vh;
-$touch-landscape-mode-landscape-height: 80vh;
-$touch-landscape-mode-portrait-width: 90vw;
-$touch-landscape-mode-portrait-height: 64vw;
-$touch-portrait-mode-landscape-width: 64vh;
-$touch-portrait-mode-landscape-height: 90vh;
-$touch-portrait-mode-portrait-width: 80vw;
-$touch-portrait-mode-portrait-height: 120vw;
-$touch-portrait-mode-portrait-height-with-actions: 135vw;
-$touch-min-width: 250px;
-$touch-min-height: 300px;
-$touch-max-width: 750px;
-$touch-max-height: 850px;
-
-@mixin landscape-calendar-size {
-  .cmat-datetimepicker-calendar {
-    width: $non-touch-calendar-landscape-width;
-    height: $non-touch-calendar-landscape-height;
-
-    &.cmat-datetimepicker-calendar-with-time-input {
-      height: $non-touch-calendar-with-time-input-landscape-height;
-    }
-  }
-}
-
-.cmat-datetimepicker-content {
-  @apply shadow border-slate-300 bg-card dark:bg-black dark:bg-opacity-5 dark:border-slate-500;
-  display: block;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.cmat-datetimepicker-content-container {
-  display: flex;
-  flex-direction: column;
-
-  // TODO: Ensures that `cmat-datetimepicker-actions` is pushed to the bottom of the popup.
-  justify-content: space-between;
-}
-
-.cmat-datetimepicker-content .cmat-calendar {
-  width: $non-touch-calendar-portrait-width;
-  height: $non-touch-calendar-portrait-height;
-
-  &.cmat-datetimepicker-calendar-with-time-input {
-    height: $non-touch-calendar-with-time-input-portrait-height;
-  }
-}
-
-.cmat-datetimepicker-content[mode='landscape'] {
-  @include landscape-calendar-size;
-}
-
-@media all and (orientation: landscape) {
-  .cmat-datetimepicker-content[mode='auto'] {
-    @include landscape-calendar-size;
-  }
-}
-
-.cmat-datetimepicker-content-touch {
-  display: block;
-  max-height: 80vh;
-
-  // Allows for the screen reader close button to be seen in touch UI mode.
-  position: relative;
-
-  // Prevents the content from jumping around on Windows while the animation is running.
-  overflow: visible;
-
-  .cmat-datetimepicker-content-container {
-    min-height: $touch-min-height;
-    max-height: $touch-max-height;
-    min-width: $touch-min-width;
-    max-width: $touch-max-width;
-  }
-
-  .cmat-datetimepicker-calendar {
-    width: 100%;
-    height: auto;
-  }
-}
-
-@media all and (orientation: landscape) {
-  .cmat-datetimepicker-content-touch {
-    .cmat-datetimepicker-content-container[mode='auto'],
-    .cmat-datetimepicker-content-container[mode='landscape'] {
-      width: $touch-landscape-mode-landscape-width;
-      height: $touch-landscape-mode-landscape-height;
-
-      .cmat-datetimepicker-calendar {
-        width: auto;
-        height: 100%;
-      }
-    }
-
-    .cmat-datetimepicker-content-container[mode='portrait'] {
-      width: $touch-portrait-mode-landscape-width;
-      height: $touch-portrait-mode-landscape-height;
-
-      .cmat-datetimepicker-calendar {
-        width: 100%;
-        height: auto;
-      }
-    }
-  }
-}
-
-@media all and (orientation: portrait) {
-  .cmat-datetimepicker-content-touch {
-    .cmat-datetimepicker-content-container[mode='auto'],
-    .cmat-datetimepicker-content-container[mode='portrait'] {
-      width: $touch-portrait-mode-portrait-width;
-      height: $touch-portrait-mode-portrait-height;
-
-      .cmat-datetimepicker-calendar {
-        width: 100%;
-        height: auto;
-      }
-    }
-
-    .cmat-datetimepicker-content-container[mode='landscape'] {
-      width: $touch-landscape-mode-portrait-width;
-      height: $touch-landscape-mode-portrait-height;
-
-      .cmat-datetimepicker-calendar {
-        width: auto;
-        height: 100%;
-      }
-    }
-
-    // The content needs to be a bit taller when actions have
-    // been projected so that it doesn't have to scroll.
-    .cmat-datetimepicker-content-container-with-actions {
-      height: $touch-portrait-mode-portrait-height-with-actions;
-    }
-  }
-}

package/components/material-datetimepicker/datetimepicker.scss

@@ -1,145 +0,0 @@
-@use "datetimepicker-content";
-
-$cmat-datetimepicker-selected-today-box-shadow-width: 1px;
-
-.cmat-datetimepicker-content {
-    @apply bg-card text-hint #{'!important'};
-}
-
-.cmat-datetimepicker-calendar-header {
-    @apply bg-primary;
-    color: white !important;
-}
-
-.cmat-datetimepicker-body-label {
-    @apply text-secondary;
-}
-
-.cmat-datetimepicker-calendar-table-header {
-    @apply text-hint;
-}
-
-.cmat-datetimepicker-calendar-body-cell-content {
-    @apply text-default;
-
-    &.cmat-datetimepicker-calendar-body-selected {
-        @apply bg-primary;
-        color: white !important;
-
-        &.cmat-datetimepicker-calendar-body-today {
-            @apply shadow;
-        }
-    }
-
-    &:not(.cmat-datetimepicker-calendar-body-selected) {
-        &.cmat-datetimepicker-calendar-body-today {
-            border-color: var(--cmat-text-hint);
-        }
-    }
-}
-
-.cmat-datetimepicker-calendar-body-cell:not(.cmat-datetimepicker-calendar-body-disabled):hover,
-.cmat-datetimepicker-calendar-body-active {
-    &>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected) {
-        background-color: rgba(var(--cmat-primary-rgb), 0.3);
-    }
-}
-
-.cmat-datetimepicker-calendar-body-disabled {
-    >.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected) {
-        color: var(--cmat-text-disabled);
-    }
-
-    >.cmat-datetimepicker-calendar-body-today:not(.cmat-datetimepicker-calendar-body-selected) {
-        border-color: rgba(var(--cmat-text-disabled), 0.8);
-    }
-
-    >.cmat-datetimepicker-calendar-body-selected {
-        background-color: rgba(var(--cmat-primary-rgb), 0.4);
-    }
-}
-
-.cmat-datetimepicker-calendar-previous-button,
-.cmat-datetimepicker-calendar-next-button {
-    &.disabled {
-        color: var(--cmat-text-disabled);
-    }
-}
-
-.cmat-datetimepicker-clock-wrapper {
-    background-color: var(--cmat-divider);
-}
-
-.cmat-datetimepicker-clock-center {
-    @apply bg-primary;
-}
-
-.cmat-datetimepicker-clock-hand {
-    @apply bg-primary;
-
-    &::before {
-        @apply bg-primary;
-    }
-}
-
-.cmat-datetimepicker-clock-cell {
-    @apply text-default;
-
-    &.cmat-datetimepicker-clock-cell-selected {
-        @apply bg-primary;
-        color: white !important;
-    }
-
-    &:not(.cmat-datetimepicker-clock-cell-selected, .cmat-datetimepicker-clock-cell-disabled):hover {
-        @apply bg-hover;
-    }
-
-    &.cmat-datetimepicker-clock-cell-disabled {
-        color: var(--cmat-text-disabled);
-    }
-}
-
-.cmat-datetimepicker-datetimepicker-toggle-active {
-    @apply text-primary;
-
-    &.mat-accent {
-        @apply text-accent;
-    }
-
-    &.mat-warn {
-        @apply text-warn;
-    }
-}
-
-.cmat-datetimepicker-time-input {
-    @apply text-primary;
-    background-color: var(--cmat-text-disabled);
-
-    &.cmat-datetimepicker-time-input-active {
-        @apply text-primary;
-        background-color: rgba(var(--cmat-primary-rgb), 0.2);
-
-        &:focus {
-            border-color: var(--cmat-primary);
-            background-color: var(--cmat-divider);
-
-            &::placeholder {
-                color: rgba(var(--cmat-primary-rgb), 0.6);
-            }
-        }
-    }
-
-    &.cmat-datetimepicker-time-input-warning {
-        border-color: var(--cmat-warn);
-    }
-}
-
-.cmat-datetimepicker-time-am.mat-mdc-button,
-.cmat-datetimepicker-time-pm.mat-mdc-button {
-    color: var(--cmat-text-hint);
-    border-color: var(--cmat-text-hint);
-
-    &.cmat-datetimepicker-time-ampm-active {
-        background-color: rgba(var(--cmat-accent-rgb), 0.2);
-    }
-}