@cerema/cadriciel 0.5.0

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/button/_splitbutton.scss

@@ -0,0 +1,381 @@
+.p-splitbutton {
+  border-radius: $borderRadius;
+
+  &.p-button-outlined {
+    > .p-button {
+      background-color: transparent;
+      color: $buttonBg;
+      border: $outlinedButtonBorder;
+
+      @include button-states {
+        &:hover {
+          background: rgba($buttonBg, $textButtonHoverBgOpacity);
+          color: $buttonBg;
+        }
+
+        &:active {
+          background: rgba($buttonBg, $textButtonActiveBgOpacity);
+          color: $buttonBg;
+        }
+      }
+    }
+
+    &.p-button-plain {
+      > .p-button {
+        color: $plainButtonTextColor;
+        border-color: $plainButtonTextColor;
+
+        @include button-states {
+          &:hover {
+            background: $plainButtonHoverBgColor;
+            color: $plainButtonTextColor;
+          }
+
+          &:active {
+            background: $plainButtonActiveBgColor;
+            color: $plainButtonTextColor;
+          }
+        }
+      }
+    }
+  }
+
+  &.p-button-text {
+    > .p-button {
+      background-color: transparent;
+      color: $buttonBg;
+      border-color: transparent;
+
+      @include button-states {
+        &:hover {
+          background: rgba($buttonBg, $textButtonHoverBgOpacity);
+          color: $buttonBg;
+          border-color: transparent;
+        }
+
+        &:active {
+          background: rgba($buttonBg, $textButtonActiveBgOpacity);
+          color: $buttonBg;
+          border-color: transparent;
+        }
+      }
+    }
+
+    &.p-button-plain {
+      > .p-button {
+        color: $plainButtonTextColor;
+
+        @include button-states {
+          &:hover {
+            background: $plainButtonHoverBgColor;
+            color: $plainButtonTextColor;
+          }
+
+          &:active {
+            background: $plainButtonActiveBgColor;
+            color: $plainButtonTextColor;
+          }
+        }
+      }
+    }
+  }
+
+
+  &.p-button-raised {
+    box-shadow: $raisedButtonShadow;
+  }
+
+  &.p-button-rounded {
+    border-radius: $roundedButtonBorderRadius;
+
+    > .p-button {
+      border-radius: $roundedButtonBorderRadius;
+    }
+  }
+
+  &.p-button-sm {
+    > .p-button {
+      @include scaledFontSize($fontSize, $scaleSM);
+      @include scaledPadding($buttonPadding, $scaleSM);
+
+      .p-button-icon {
+        @include scaledFontSize($primeIconFontSize, $scaleSM);
+      }
+    }
+  }
+
+  &.p-button-lg {
+    > .p-button {
+      @include scaledFontSize($fontSize, $scaleLG);
+      @include scaledPadding($buttonPadding, $scaleLG);
+
+      .p-button-icon {
+        @include scaledFontSize($primeIconFontSize, $scaleLG);
+      }
+    }
+  }
+}
+
+.p-splitbutton.p-button-secondary {
+  &.p-button-outlined {
+    > .p-button {
+      background-color: transparent;
+      color: $secondaryButtonBg;
+      border: $outlinedButtonBorder;
+
+      @include button-states {
+        &:hover {
+          background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+          color: $secondaryButtonBg;
+        }
+
+        &:active {
+          background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+          color: $secondaryButtonBg;
+        }
+      }
+    }
+  }
+
+  &.p-button-text {
+    > .p-button {
+      background-color: transparent;
+      color: $secondaryButtonBg;
+      border-color: transparent;
+
+      @include button-states {
+        &:hover {
+          background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+          border-color: transparent;
+          color: $secondaryButtonBg;
+        }
+
+        &:active {
+          background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+          border-color: transparent;
+          color: $secondaryButtonBg;
+        }
+      }
+    }
+  }
+}
+
+.p-splitbutton.p-button-info {
+  &.p-button-outlined {
+    > .p-button {
+      background-color: transparent;
+      color: $infoButtonBg;
+      border: $outlinedButtonBorder;
+
+      @include button-states {
+        &:hover {
+          background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+          color: $infoButtonBg;
+        }
+
+        &:active {
+          background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+          color: $infoButtonBg;
+        }
+      }
+    }
+  }
+
+  &.p-button-text {
+    > .p-button {
+      background-color: transparent;
+      color: $infoButtonBg;
+      border-color: transparent;
+
+      @include button-states {
+        &:hover {
+          background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+          border-color: transparent;
+          color: $infoButtonBg;
+        }
+
+        &:active {
+          background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+          border-color: transparent;
+          color: $infoButtonBg;
+        }
+      }
+    }
+  }
+}
+
+.p-splitbutton.p-button-success {
+  &.p-button-outlined {
+    > .p-button {
+      background-color: transparent;
+      color: $successButtonBg;
+      border: $outlinedButtonBorder;
+
+      @include button-states {
+        &:hover {
+          background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+          color: $successButtonBg;
+        }
+
+        &:active {
+          background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+          color: $successButtonBg;
+        }
+      }
+    }
+  }
+
+  &.p-button-text {
+    > .p-button {
+      background-color: transparent;
+      color: $successButtonBg;
+      border-color: transparent;
+
+      @include button-states {
+        &:hover {
+          background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+          border-color: transparent;
+          color: $successButtonBg;
+        }
+
+        &:active {
+          background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+          border-color: transparent;
+          color: $successButtonBg;
+        }
+      }
+    }
+  }
+}
+
+.p-splitbutton.p-button-warning {
+  &.p-button-outlined {
+    > .p-button {
+      background-color: transparent;
+      color: $warningButtonBg;
+      border: $outlinedButtonBorder;
+
+      @include button-states {
+        &:hover {
+          background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+          color: $warningButtonBg;
+        }
+
+        &:active {
+          background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+          color: $warningButtonBg;
+        }
+      }
+    }
+  }
+
+  &.p-button-text {
+    > .p-button {
+      background-color: transparent;
+      color: $warningButtonBg;
+      border-color: transparent;
+
+      @include button-states {
+        &:hover {
+          background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+          border-color: transparent;
+          color: $warningButtonBg;
+        }
+
+        &:active {
+          background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+          border-color: transparent;
+          color: $warningButtonBg;
+        }
+      }
+    }
+  }
+}
+
+.p-splitbutton.p-button-help {
+  &.p-button-outlined {
+    > .p-button {
+      background-color: transparent;
+      color: $helpButtonBg;
+      border: $outlinedButtonBorder;
+
+      @include button-states {
+        &:hover {
+          background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+          color: $helpButtonBg;
+        }
+
+        &:active {
+          background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+          color: $helpButtonBg;
+        }
+      }
+    }
+  }
+
+  &.p-button-text {
+    > .p-button {
+      background-color: transparent;
+      color: $helpButtonBg;
+      border-color: transparent;
+
+      @include button-states {
+        &:hover {
+          background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+          border-color: transparent;
+          color: $helpButtonBg;
+        }
+
+        &:active {
+          background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+          border-color: transparent;
+          color: $helpButtonBg;
+        }
+      }
+    }
+  }
+}
+
+.p-splitbutton.p-button-danger {
+  &.p-button-outlined {
+    > .p-button {
+      background-color: transparent;
+      color: $dangerButtonBg;
+      border: $outlinedButtonBorder;
+
+      @include button-states {
+        &:hover {
+          background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+          color: $dangerButtonBg;
+        }
+
+        &:active {
+          background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+          color: $dangerButtonBg;
+        }
+      }
+    }
+  }
+
+  &.p-button-text {
+    > .p-button {
+      background-color: transparent;
+      color: $dangerButtonBg;
+      border-color: transparent;
+
+      @include button-states {
+        &:hover {
+          background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+          border-color: transparent;
+          color: $dangerButtonBg;
+        }
+
+        &:active {
+          background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+          border-color: transparent;
+          color: $dangerButtonBg;
+        }
+      }
+    }
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/data/_carousel.scss

@@ -0,0 +1,37 @@
+.p-carousel {
+  .p-carousel-content {
+    .p-carousel-prev,
+    .p-carousel-next {
+      @include action-icon();
+      margin: $inlineSpacing;
+    }
+  }
+
+  .p-carousel-indicators {
+    padding: $carouselIndicatorsPadding;
+
+    .p-carousel-indicator {
+      margin-right: $inlineSpacing;
+      margin-bottom: $inlineSpacing;
+
+      button {
+        background-color: $carouselIndicatorBg;
+        width: $carouselIndicatorWidth;
+        height: $carouselIndicatorHeight;
+        transition: $actionIconTransition;
+        border-radius: $carouselIndicatorBorderRadius;
+
+        &:hover {
+          background: $carouselIndicatorHoverBg;
+        }
+      }
+
+      &.p-highlight {
+        button {
+          background: $highlightBg;
+          color: $highlightTextColor;
+        }
+      }
+    }
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/data/_datatable.scss

@@ -0,0 +1,278 @@
+.p-datatable {
+  .p-paginator-top {
+    border-width: $tableTopPaginatorBorderWidth;
+    border-radius: 0;
+  }
+
+  .p-paginator-bottom {
+    border-width: $tableBottomPaginatorBorderWidth;
+    border-radius: 0;
+  }
+
+  .p-datatable-header {
+    background: $tableHeaderBg;
+    color: $tableHeaderTextColor;
+    border: $tableHeaderBorder;
+    border-width: $tableHeaderBorderWidth;
+    padding: $tableHeaderPadding;
+    font-weight: $tableHeaderFontWeight;
+  }
+
+  .p-datatable-footer {
+    background: $tableFooterBg;
+    color: $tableFooterTextColor;
+    border: $tableFooterBorder;
+    border-width: $tableFooterBorderWidth;
+    padding: $tableFooterPadding;
+    font-weight: $tableFooterFontWeight;
+  }
+
+  .p-datatable-thead > tr > th {
+    text-align: $tableCellContentAlignment;
+    padding: $tableHeaderCellPadding;
+    border: $tableHeaderCellBorder;
+    border-width: $tableHeaderCellBorderWidth;
+    font-weight: $tableHeaderCellFontWeight;
+    color: $tableHeaderCellTextColor;
+    background: $tableHeaderCellBg;
+    transition: $listItemTransition;
+  }
+
+  .p-datatable-tfoot > tr > td {
+    text-align: $tableCellContentAlignment;
+    padding: $tableFooterCellPadding;
+    border: $tableFooterCellBorder;
+    border-width: $tableFooterCellBorderWidth;
+    font-weight: $tableFooterCellFontWeight;
+    color: $tableFooterCellTextColor;
+    background: $tableFooterCellBg;
+  }
+
+  .p-sortable-column {
+    .p-sortable-column-icon {
+      color: $tableHeaderCellIconColor;
+      margin-left: $inlineSpacing;
+    }
+
+    .p-sortable-column-badge {
+      border-radius: 50%;
+      height: $tableSortableColumnBadgeSize;
+      min-width: $tableSortableColumnBadgeSize;
+      line-height: $tableSortableColumnBadgeSize;
+      color: $highlightTextColor;
+      background: $highlightBg;
+      margin-left: $inlineSpacing;
+    }
+
+    &:not(.p-highlight):hover {
+      background: $tableHeaderCellHoverBg;
+      color: $tableHeaderCellTextHoverColor;
+
+      .p-sortable-column-icon {
+        color: $tableHeaderCellIconHoverColor;
+      }
+    }
+
+    &.p-highlight {
+      background: $tableHeaderCellHighlightBg;
+      color: $tableHeaderCellHighlightTextColor;
+
+      .p-sortable-column-icon {
+        color: $tableHeaderCellHighlightTextColor;
+      }
+
+      &:hover {
+        background: $tableHeaderCellHighlightHoverBg;
+        color: $tableHeaderCellHighlightTextColor;
+
+        .p-sortable-column-icon {
+          color: $tableHeaderCellHighlightTextColor;
+        }
+      }
+    }
+
+    &:focus {
+      box-shadow: $inputListItemFocusShadow;
+      outline: 0 none;
+    }
+  }
+
+  .p-datatable-tbody {
+    > tr {
+      background: $tableBodyRowBg;
+      color: $tableBodyRowTextColor;
+      transition: $listItemTransition;
+
+      > td {
+        text-align: $tableCellContentAlignment;
+        border: $tableBodyCellBorder;
+        border-width: $tableBodyCellBorderWidth;
+        padding: $tableBodyCellPadding;
+
+        .p-row-toggler,
+        .p-row-editor-init,
+        .p-row-editor-save,
+        .p-row-editor-cancel {
+          @include action-icon();
+        }
+
+        .p-row-editor-save {
+          margin-right: $inlineSpacing;
+        }
+      }
+
+      &:focus {
+        outline: 0.15rem solid $focusOutlineColor;
+        outline-offset: 0.15rem;
+      }
+
+      &.p-highlight {
+        background: $highlightBg;
+        color: $highlightTextColor;
+      }
+
+      &.p-datatable-dragpoint-top > td {
+        box-shadow: inset 0 2px 0 0 $highlightBg;
+      }
+
+      &.p-datatable-dragpoint-bottom > td {
+        box-shadow: inset 0 -2px 0 0 $highlightBg;
+      }
+    }
+  }
+
+  &.p-datatable-hoverable-rows {
+    .p-datatable-tbody > tr:not(.p-highlight):hover {
+      background: $tableBodyRowHoverBg;
+      color: $tableBodyRowTextHoverColor;
+    }
+  }
+
+  .p-column-resizer-helper {
+    background: $tableResizerHelperBg;
+  }
+
+  .p-datatable-scrollable-header,
+  .p-datatable-scrollable-footer {
+    background: $panelHeaderBg;
+  }
+
+  &.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
+  &.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table {
+    > .p-datatable-thead,
+    > .p-datatable-tfoot {
+      background-color: $tableHeaderCellBg;
+    }
+  }
+
+  .p-datatable-loading-icon {
+    font-size: $loadingIconFontSize;
+  }
+
+  &.p-datatable-gridlines {
+    .p-datatable-header {
+      border-width: 1px 1px 0 1px;
+    }
+
+    .p-datatable-footer {
+      border-width: 0 1px 1px 1px;
+    }
+
+    .p-paginator-top {
+      border-width: 0 1px 0 1px;
+    }
+
+    .p-paginator-bottom {
+      border-width: 0 1px 1px 1px;
+    }
+
+    .p-datatable-thead {
+      > tr {
+        > th {
+          border-width: 1px 1px nth($tableHeaderCellBorderWidth, 3) 1px;
+        }
+      }
+    }
+
+    .p-datatable-tbody {
+      > tr {
+        > td {
+          border-width: 1px;
+        }
+      }
+    }
+
+    .p-datatable-tfoot {
+      > tr {
+        > td {
+          border-width: 1px;
+        }
+      }
+    }
+  }
+
+  &.p-datatable-striped {
+    .p-datatable-tbody {
+      > tr:nth-child(even) {
+        background: $tableBodyRowEvenBg;
+
+        &.p-highlight {
+          background: $highlightBg;
+          color: $highlightTextColor;
+
+          .p-row-toggler {
+            color: $highlightTextColor;
+
+            &:hover {
+              color: $highlightTextColor;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.p-datatable-sm {
+    .p-datatable-header {
+      @include scaledPadding($tableHeaderPadding, $tableScaleSM);
+    }
+
+    .p-datatable-thead > tr > th {
+      @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+    }
+
+    .p-datatable-tbody > tr > td {
+      @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+    }
+
+    .p-datatable-tfoot > tr > td {
+      @include scaledPadding($tableFooterPadding, $tableScaleSM);
+    }
+
+    .p-datatable-footer {
+      @include scaledPadding($tableFooterPadding, $tableScaleSM);
+    }
+  }
+
+  &.p-datatable-lg {
+    .p-datatable-header {
+      @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+    }
+
+    .p-datatable-thead > tr > th {
+      @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+    }
+
+    .p-datatable-tbody > tr > td {
+      @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+    }
+
+    .p-datatable-tfoot > tr > td {
+      @include scaledPadding($tableFooterPadding, $tableScaleLG);
+    }
+
+    .p-datatable-footer {
+      @include scaledPadding($tableFooterPadding, $tableScaleLG);
+    }
+  }
+}