@aziontech/theme 2.5.0 → 4.0.0

package/src/azion/extended-components/_button.scss

@@ -1,134 +0,0 @@
-//Custom Button
-
-.p-button {
-  font-weight: 500 !important;
-
-  &.p-button-outlined {
-    color: $textColor !important;
-
-    &:enabled:hover {
-      background-color: var(--surface-hover) !important;
-    }
-
-    &:enabled:active {
-      background-color: var(--surface-hover) !important;
-    }
-
-    &.p-button-plain {
-      color: $textColor !important;
-
-      &:enabled:hover {
-        color: $textColor !important;
-      }
-
-      &:enabled:active {
-        color: $textColor !important;
-      }
-    }
-  }
-
-  &.p-button-text {
-    color: $textColor !important;
-
-    &:enabled:hover {
-      color: $textColor !important;
-      background-color: var(--surface-hover);
-    }
-
-    &:enabled:active {
-      color: $textColor !important;
-      background-color: var(--surface-hover);
-    }
-
-    &.p-button-plain {
-      color: $textColor !important;
-      background-color: var(--surface-hover);
-
-      &:enabled:hover {
-        color: $textColor !important;
-      }
-
-      &:enabled:active {
-        color: $textColor !important;
-        background-color: var(--surface-hover);
-      }
-    }
-  }
-
-  &.p-button-icon-only:not(
-      .p-datepicker-trigger,
-      .p-inputnumber-button,
-      .table-button
-    ) {
-    width: 2rem !important;
-    height: 2rem !important;
-    .p-button-icon-left,
-    .p-button-icon-right {
-      margin: 0;
-    }
-  }
-
-  &.p-button-sm {
-    @include scaledFontSize($fontSize, $scaleSM);
-    @include scaledPadding($buttonPadding, $scaleSM);
-
-    .p-button-icon {
-      @include scaledFontSize($primeIconFontSize, $scaleSM);
-    }
-  }
-
-  &.p-button-lg {
-    @include scaledFontSize($fontSize, $scaleLG);
-    @include scaledPadding($buttonPadding, $scaleLG);
-
-    .p-button-icon {
-      @include scaledFontSize($primeIconFontSize, $scaleLG);
-    }
-  }
-
-  &.p-button-loading-label-only {
-    .p-button-loading-icon {
-      margin-right: 0;
-    }
-  }
-}
-
-.p-fluid {
-  .p-button {
-    width: 100%;
-  }
-
-  .p-button-icon-only {
-    width: $buttonIconOnlyWidth;
-  }
-
-  .p-buttonset {
-    display: flex;
-
-    .p-button {
-      flex: 1;
-    }
-  }
-}
-
-.p-button.p-button-link {
-  color: $linkButtonColor !important;
-  &:not(:disabled):focus {
-    box-shadow: none !important;
-  }
-  &:not(:disabled):focus-visible {
-    box-shadow: $linkButtonFocusShadow !important;
-  }
-}
-
-.p-inputgroup > .p-button {
-  &.p-button-icon-only {
-    color: initial;
-    width: initial;
-    height: initial !important;
-    .p-button-icon-left,
-    .p-button-icon-right {
-      margin: initial;
-    }
-  }
-}

package/src/azion/extended-components/_calendar.scss

@@ -1,310 +0,0 @@
-.p-calendar {
-  .p-button-icon-only {
-    color: $inputIconColor;
-    background: $inputBg;
-    border: $inputBorder;
-    border-left: none;
-
-    &:enabled:hover {
-      background: $secondaryButtonHoverBg;
-      color: $secondaryButtonTextHoverColor;
-      border-color: $secondaryButtonHoverBorderColor;
-    }
-
-    &:enabled:focus {
-      box-shadow: $secondaryButtonFocusShadow;
-    }
-
-    &:enabled:active {
-      background: $secondaryButtonActiveBg;
-      color: $secondaryButtonTextActiveColor;
-      border-color: $secondaryButtonActiveBorderColor;
-    }
-
-    &.p-button-outlined {
-      background-color: transparent;
-      color: $secondaryButtonBg;
-      border: $outlinedButtonBorder;
-
-      &:enabled:hover {
-        background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
-        color: $secondaryButtonBg;
-        border: $outlinedButtonBorder;
-      }
-
-      &:enabled:active {
-        background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
-        color: $secondaryButtonBg;
-        border: $outlinedButtonBorder;
-      }
-    }
-  }
-}
-
-.p-datepicker {
-  padding: $calendarPadding;
-  max-width: 320px !important;
-  background: $calendarInlineBg;
-  color: $calendarTextColor;
-  border: $calendarBorder;
-  border-radius: $borderRadius;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: fit-content !important;
-
-  .p-datepicker-group-container {
-    width: fit-content !important;
-  }
-
-  &:not(.p-datepicker-inline) {
-      background: $calendarBg;
-      border: $calendarOverlayBorder;
-      box-shadow: $inputOverlayShadow;
-
-      .p-datepicker-header {
-          background: $calendarHeaderBg;
-          width: 100% !important;
-      }
-  }
-
-  .p-datepicker-header {
-      padding: 0 !important;
-      color: $calendarHeaderTextColor;
-      background: $calendarInlineHeaderBg;
-      font-weight: $calendarHeaderFontWeight;
-      margin: $inputListHeaderMargin;
-      border-bottom: $divider;
-      border-top-right-radius: $borderRadius;
-      border-top-left-radius: $borderRadius;
-
-      .p-datepicker-prev,
-      .p-datepicker-next {
-          @include action-icon();
-      }
-
-      .p-datepicker-title {
-          line-height: $actionIconHeight;
-
-          .p-datepicker-year,
-          .p-datepicker-month {
-              color: $calendarHeaderTextColor;
-              transition: $actionIconTransition;
-              font-weight: $calendarHeaderFontWeight;
-              padding: $calendarHeaderCellPadding;
-
-              &:enabled:hover {
-                  color: $calendarMonthYearHeaderHoverTextColor;
-              }
-          }
-
-          .p-datepicker-month {
-              margin-right: $inlineSpacing;
-          }
-      }
-  }
-
-  .p-datepicker-calendar-container {
-    padding: 0px !important;
-    width: fit-content !important;
-  }
-
-  table {
-      font-size: $fontSize;
-      margin: $calendarTableMargin;
-
-      th {
-          padding: 0 !important;
-
-          > span {
-              width: 32px !important;
-              height: 32px !important;
-              margin: 4px !important;
-          }
-      }
-
-      td {
-          padding: 0 !important;
-
-          > span {
-              width: 32px !important;
-              height: 32px !important;
-              margin: 4px !important;
-              border-radius: $calendarCellDateBorderRadius;
-              transition: $listItemTransition;
-              border: $calendarCellDateBorder;
-
-              &.p-highlight {
-                  color: var(--secondary-button-text-active-color);
-                  font-weight: 500 !important;
-                  background: var(--secondary-button-active-bg) !important;
-              }
-
-              &:focus {
-                  @include focused();
-              }
-          }
-
-          &.p-datepicker-today {
-              > span {
-                  background: var(--surface-500);
-                  color: var(--text-color);
-                  border-color: none;
-
-                  &.p-highlight {
-                    color: var(--primary-color-text);
-                    font-weight: 500;
-                    background: var(--primary-dark-color);
-                  }
-              }
-          }
-      }
-  }
-
-  .p-datepicker-buttonbar {
-      padding: $calendarButtonBarPadding;
-      border-top: $divider;
-
-      .p-button {
-          width: auto;
-      }
-  }
-
-  .p-timepicker {
-      border-top: $divider;
-      padding: 0;
-      width: 100% !important;
-
-      button {
-          @include action-icon();
-
-          &:last-child {
-              margin-top: .2em;
-          }
-      }
-
-      span {
-          font-size: 1rem !important;
-      }
-
-      > div {
-          padding: $calendarTimePickerElementPadding;
-      }
-  }
-
-  &.p-datepicker-timeonly {
-      .p-timepicker {
-          border-top: 0 none;
-      }
-  }
-
-  .p-monthpicker {
-      margin: $calendarTableMargin;
-
-      .p-monthpicker-month {
-          padding: $calendarCellDatePadding;
-          transition: $listItemTransition;
-          border-radius: $borderRadius;
-
-          &.p-highlight {
-              color: $highlightTextColor;
-              background: $highlightBg;
-          }
-      }
-  }
-
-  .p-yearpicker {
-      margin: $calendarTableMargin;
-
-      .p-yearpicker-year {
-          padding: $calendarCellDatePadding;
-          transition: $listItemTransition;
-          border-radius: $borderRadius;
-
-          &.p-highlight {
-              color: $highlightTextColor;
-              background: $highlightBg;
-          }
-      }
-  }
-
-  .p-datepicker-group {
-    width: 100% !important;
-  }
-
-  &.p-datepicker-multiple-month {
-      .p-datepicker-group {
-        width: 100% !important;
-          border-left: $divider;
-          padding-right: $calendarPadding;
-          padding-left: $calendarPadding;
-          padding-top: 0;
-          padding-bottom: 0;
-
-          &:first-child {
-              padding-left: 0;
-              border-left: 0 none;
-          }
-
-          &:last-child {
-              padding-right: 0;
-          }
-      }
-  }
-
-  &:not(.p-disabled) {
-      table {
-          td {
-              span:not(.p-highlight):not(.p-disabled) {
-                  &:hover {
-                      background: $calendarCellDateHoverBg;
-                  }
-
-                  &:focus {
-                      @include focused();
-                  }
-              }
-          }
-      }
-
-      .p-monthpicker {
-          .p-monthpicker-month {
-              &:not(.p-disabled) {
-                  &:not(.p-highlight):hover {
-                      background: $calendarCellDateHoverBg;
-                  }
-
-                  &:focus {
-                      @include focused();
-                  }
-              }
-          }
-      }
-
-      .p-yearpicker {
-          .p-yearpicker-year {
-              &:not(.p-disabled) {
-                  &:not(.p-highlight):hover {
-                      background: $calendarCellDateHoverBg;
-                  }
-
-                  &:focus {
-                      @include focused();
-                  }
-              }
-          }
-      }
-  }
-
-}
-
-@media screen and (max-width: $calendarBreakpoint) {
-  .p-datepicker {
-      table {
-          th, td {
-              padding: $calendarCellDatePaddingSM;
-          }
-      }
-  }
-}

package/src/azion/extended-components/_carousel.scss

@@ -1,9 +0,0 @@
-// Custom carousel
-
-.p-carousel-indicators {
-    .p-carousel-indicator {
-        &.p-highlight {
-            background: var(--carousel-indicator-highlight) !important;
-        }
-    }
-}

package/src/azion/extended-components/_checkbox.scss

@@ -1,33 +0,0 @@
-// Custom Checkbox
-.p-checkbox {
-  .p-checkbox-box {
-    border: 2px solid var(--surface-border) !important;
-
-    &.p-highlight {
-      border-color: #f3652b !important;
-      background: #f3652b !important;
-    }
-  }
-
-  &:not(.p-checkbox-disabled) {
-    .p-checkbox-box {
-      &:hover {
-        background: var(--gray-100) !important;
-        border-color: #f5793f !important;
-      }
-
-      &.p-focus {
-        @include focused-input();
-      }
-
-      &.p-highlight:hover {
-        border-color: #f5793f !important;
-        background: #f5793f !important;
-      }
-    }
-  }
-
-  &.p-invalid > .p-checkbox-box {
-    @include invalid-input();
-  }
-}

package/src/azion/extended-components/_datatable.scss

@@ -1,130 +0,0 @@
-.p-datatable {
-  border: var(--surface-border) 1px solid;
-  border-radius: $borderRadius;
-  font-size: 0.875rem !important;
-  text-wrap: nowrap !important;
-
-  .p-paginator {
-    border-width: 0px !important;
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
-
-  .p-datatable-header {
-    border-top-right-radius: $borderRadius;
-    border-top-left-radius: $borderRadius;
-  }
-
-  .p-datatable-tbody > .p-datatable-emptymessage:hover {
-    background: unset !important;
-  }
-
-  .p-datatable-tbody {
-    .p-frozen-column {
-      background: var(--table-body-row-even-bg);
-      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
-    }
-  }
-
-  .p-datatable-tbody > tr:hover,
-  .p-datatable-tbody > tr.bg-altered {
-    .p-frozen-column {
-      background: var(--table-body-row-hover-bg);
-    }
-  }
-
-  .p-datatable-tbody > tr > td {
-    box-sizing: inherit !important;
-    font-size: 0.875rem;
-  }
-
-  .p-datatable-thead > tr > th {
-    box-sizing: inherit !important;
-    font-size: 0.875rem;
-    text-wrap: nowrap !important;
-
-    .p-column-header-content {
-      vertical-align: center;
-    }
-  }
-
-  .p-sortable-column {
-    .p-sortable-column-icon {
-      opacity: 0 !important;
-    }
-  }
-
-  .p-sortable-column:hover {
-    .p-sortable-column-icon {
-      opacity: 1 !important;
-      color: $tableHeaderCellHighlightTextColor !important;
-    }
-  }
-
-  .p-sortable-column {
-    .p-sortable-column-icon {
-      opacity: 0;
-    }
-
-    &.p-highlight {
-      .p-sortable-column-icon {
-        opacity: 1 !important;
-      }
-    }
-  }
-
-  .p-datatable-wrapper {
-    overscroll-behavior: revert !important;
-  }
-
-  .p-datatable-tbody > .p-datatable-emptymessage:hover {
-    background: unset !important;
-  }
-
-  &.p-datatable-gridlines {
-    border: none !important;
-    transition: border-color 0.2s background-color 0.2s;
-    .p-paginator-bottom {
-      border-color: var(--surface-border) !important;
-      border-bottom-left-radius: $borderRadius;
-      border-bottom-right-radius: $borderRadius;
-    }
-  }
-}
-
-.p-overlaypanel:has(.hidden-columns-panel) {
-  box-shadow: none !important;
-}
-.hidden-columns-panel {
-  .p-listbox-item {
-    font-size: 0.875rem;
-    line-height: 0.875rem;
-    padding: 0.75rem 0.5rem !important;
-    color: var(--surface-700) !important;
-    background: transparent;
-    &::before {
-      font-family: primeicons;
-      content: "\e965" !important;
-      color: var(--surface-700);
-      margin-right: 0.5rem;
-      font-size: 0.875rem;
-      line-height: 0.875rem;
-    }
-    &:hover {
-      background: $inputListItemHoverBg !important;
-    }
-    &.p-highlight {
-      opacity: 1;
-      color: var(--text-color) !important;
-      background: transparent !important;
-      &::before {
-        font-family: primeicons;
-        content: "\e966" !important;
-        color: var(--text-color);
-      }
-      &:hover {
-        background: $inputListItemHoverBg !important;
-      }
-    }
-  }
-}

package/src/azion/extended-components/_dialog.scss

@@ -1,45 +0,0 @@
-// Custom Dialog
-.p-dialog {
-  margin-inline: 2rem !important;
-  .p-dialog-header {
-    justify-content: space-between;
-    font-size: 1.25rem !important;
-    min-height: 3.5rem !important;
-    font-weight: 500 !important;
-    padding-inline: 2rem !important;
-    border-bottom: 1px solid var(--surface-border) !important;
-  }
-  .p-dialog-footer {
-    height: 3.5rem !important;
-    padding-inline: 2rem !important;
-    display: flex !important;
-    flex-direction: row;
-    align-items: center !important;
-    justify-content: flex-end !important;
-    gap: 0.75rem !important;
-    button {
-      margin: 0 !important;
-    }
-  }
-}
-
-@media only screen and (max-width: 768px) {
-  .p-dialog {
-    margin-inline: 0.75rem !important;
-    .p-dialog-header {
-      padding-inline: 0.75rem !important;
-    }
-    .p-dialog-content {
-      padding-inline: 0.75rem !important;
-    }
-    .p-dialog-footer {
-      button {
-        width: 100%;
-      }
-      height: auto !important ;
-      flex-direction: column;
-      padding-block: 0.75rem !important;
-      padding-inline: 0.75rem !important;
-    }
-  }
-}

package/src/azion/extended-components/_divider.scss

@@ -1,37 +0,0 @@
-.surface-card {
-  .p-divider-content {
-    background-color: var(--surface-card) !important;
-  }
-}
-
-.p-divider {
-  .p-divider-content {
-    background-color: $panelContentBg;
-  }
-
-  &.p-divider-horizontal {
-    margin: $dividerHorizontalMargin;
-    padding: $dividerHorizontalPadding;
-
-    &:before {
-      border-top: 1px solid var(--surface-border);
-    }
-
-    .p-divider-content {
-      padding: 0 $inlineSpacing;
-    }
-  }
-
-  &.p-divider-vertical {
-    margin: $dividerVerticalMargin;
-    padding: $dividerVerticalPadding;
-
-    &:before {
-      border-left: 1px solid var(--surface-border);
-    }
-
-    .p-divider-content {
-      padding: $inlineSpacing 0;
-    }
-  }
-}

package/src/azion/extended-components/_dropdown.scss

@@ -1,10 +0,0 @@
-.p-dropdown-panel {
-
-    .p-dropdown-items {
-
-        .p-dropdown-empty-message {
-            color: var(--text-color-empty);
-            font-size: 14px;
-        }
-    }
-}