azion-theme 1.3.5

package/src/primevue-sass-theme/themes/bootstrap4/bootstrap4-light/blue/_extensions.scss

@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */

package/src/primevue-sass-theme/themes/bootstrap4/bootstrap4-light/blue/_fonts.scss

@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank

package/src/primevue-sass-theme/themes/bootstrap4/bootstrap4-light/blue/_variables.scss

@@ -0,0 +1,12 @@
+$primaryLightColor: rgba(38,143,255,.5) !default;
+$primaryColor: #007bff !default;
+$primaryDarkColor: #0069d9 !default;
+$primaryDarkerColor: #0062cc !default;
+$primaryTextColor: #ffffff !default;
+$primaryAccentBg: #cce5ff !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, 8%) !default;
+
+@import '../_variables_light';

package/src/primevue-sass-theme/themes/bootstrap4/bootstrap4-light/blue/theme.scss

@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../theme-base/_components';
+@import '../../_vendor_extensions';
+@import './_extensions';

package/src/primevue-sass-theme/themes/bootstrap4/bootstrap4-light/purple/_extensions.scss

@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */

package/src/primevue-sass-theme/themes/bootstrap4/bootstrap4-light/purple/_fonts.scss

@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank

package/src/primevue-sass-theme/themes/bootstrap4/bootstrap4-light/purple/_variables.scss

@@ -0,0 +1,12 @@
+$primaryLightColor: rgba(136, 60, 174, 0.5) !default;
+$primaryColor: #883cae !default;
+$primaryDarkColor: #7a38a7 !default;
+$primaryDarkerColor: #68329e !default;
+$primaryTextColor: #ffffff !default;
+$primaryAccentBg: #e7d8ef !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, 8%) !default;
+
+@import '../_variables_light';

package/src/primevue-sass-theme/themes/bootstrap4/bootstrap4-light/purple/theme.scss

@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../theme-base/_components';
+@import '../../_vendor_extensions';
+@import './_extensions';

package/src/primevue-sass-theme/themes/fluent/fluent-light/_extensions.scss

@@ -0,0 +1,274 @@
+/* Customizations to the designer theme should be defined here */
+@mixin disabled-input() {
+    background-color: $neutralLighter;
+    border-color: $neutralLighter;
+    color: $neutralTertiary;
+    opacity: 1;
+    user-select: none;
+}
+
+@mixin focused-input-field() {
+    box-shadow: inset 0 0 0 1px $themePrimary;
+}
+
+@mixin focused-with-outline() {
+    box-shadow: none;
+    outline: 1px solid $focusOutlineColor;
+    outline-offset: 2px;
+}
+
+@layer primevue {
+    .p-button-label {
+        font-weight: 600;
+    }
+
+    .p-slider:not(.p-disabled):hover {
+        background-color: $themeLighter;
+
+        .p-slider-range {
+            background-color: $themePrimary;
+        }
+
+        .p-slider-handle {
+            border-color: $themeDark;
+        }
+    }
+
+    .p-inputswitch {
+        width: 40px;
+        height: 20px;
+
+        .p-inputswitch-slider {
+            border: $inputBorder;
+
+            &:before {
+                width: 12px;
+                height: 12px;
+                margin-top: -6px;
+            }
+        }
+
+        &:not(.p-disabled):hover {
+            .p-inputswitch-slider {
+                border-color: $inputHoverBorderColor;
+
+                &:before {
+                    background-color: $inputHoverBorderColor;
+                }
+            }
+        }
+
+        &.p-inputswitch-checked {
+            &:not(.p-disabled):hover {
+                .p-inputswitch-slider {
+                    border-color: $inputSwitchSliderOnBg;
+                    
+                    &:before {
+                        background-color: $inputSwitchHandleOnBg;
+                    }
+                }
+            }
+
+            .p-inputswitch-slider {
+                border-color: $inputSwitchSliderOnBg;
+            }
+        }
+    }
+
+    .p-datepicker {
+        .p-datepicker-header .p-datepicker-title {
+            order: 1;
+            margin: 0 auto 0 0;
+        }
+
+        .p-datepicker-prev {
+            order: 2;
+
+            .p-datepicker-prev-icon:before {
+                content: "\e919";
+            }
+        }
+
+        .p-datepicker-next {
+            order: 3;
+            font-size: 90%;
+
+            .p-datepicker-next-icon:before {
+                content: "\e91c";
+            }
+        }
+
+        .p-datepicker-buttonbar {
+            border-top: 0 none;
+        }
+
+        .p-timepicker {
+            border-top: 0 none;
+
+            span {
+                font-size: 90%;
+            }
+
+            .pi-chevron-up:before {
+                content: "\e91c";
+            }
+
+            .pi-chevron-down:before {
+                content: "\e919";
+            }
+        }
+
+        table {
+            font-size: 90%;
+
+            td {
+                &.p-datepicker-today {
+                    > span {
+                        border-radius: 50%;
+                    }
+                }
+            }
+        }
+
+        .p-datepicker-buttonbar {
+            .p-button {
+                font-size: 90%;
+                color: $textColor;
+                
+                .p-button-label {
+                    font-weight: 400;
+                }
+
+                &:enabled:hover {
+                    color: $textColor;
+                    background-color:$neutralLighter;
+                }
+            }
+        }
+
+        .p-monthpicker {
+            .p-monthpicker-month {
+                padding: .5rem 0;
+            }
+        }
+    }
+
+    .p-datatable {
+        font-size: 90%;
+    }
+
+    .p-toast {
+        font-size: 90%;
+
+        .p-toast-icon-close-icon {
+            font-size: 90%;
+        }
+    }
+
+    .p-message {
+        font-size: 90%;
+
+        .p-message-close {
+            .p-message-close-icon {
+                font-size: 90%;
+            }
+        }
+    }
+
+    .p-tooltip {
+        .p-tooltip-text {
+            font-size: 90%;
+        }
+    }
+
+    .p-component {
+        .p-menu-separator {
+            border-color: #eeeeee;
+        }
+    }
+
+    .p-submenu-icon {
+        color: $textSecondaryColor !important;
+    }
+
+    .p-menuitem-active .p-submenu-icon {
+        color: $textColor !important;
+    }
+
+    .p-progressbar-label {
+        display: none !important;
+    }
+
+    .p-carousel {
+        .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+            background-color: $themePrimary;
+        }
+    }
+
+    .p-galleria {
+        .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+            background-color: $themePrimary;
+        }
+    }
+
+    .p-inputtext {
+        &:disabled {
+            @include disabled-input();
+        }
+
+        &:enabled:focus {
+            @include focused-input-field();
+        }   
+    }
+
+    .p-checkbox .p-checkbox-box,
+    .p-radiobutton .p-radiobutton-box,
+    .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container,
+    .p-chips .p-chips-multiple-container {
+        &.p-disabled {
+            @include disabled-input();
+        }
+
+        &:not(.p-disabled).p-focus {
+            @include focused-input-field();
+        }
+    }
+
+    .p-dropdown,
+    .p-multiselect {
+        &.p-disabled {
+            @include disabled-input();
+
+            .p-dropdown-label,
+            .p-dropdown-trigger-icon {
+                color: $neutralTertiary;
+            }
+        }
+
+        &:not(.p-disabled).p-focus {
+            @include focused-input-field();
+        }
+    }
+
+    .p-inputswitch.p-focus {
+        .p-inputswitch-slider {
+            box-shadow: none;
+            outline: 1px solid $focusOutlineColor;
+            outline-offset: 2px;
+        }
+    }
+
+    .p-datatable {
+        .p-datatable-tbody {
+            > tr {
+                &.p-datatable-dragpoint-top > td {
+                    box-shadow: inset 0 2px 0 0 $themePrimary;
+                }
+
+                &.p-datatable-dragpoint-bottom > td {
+                    box-shadow: inset 0 -2px 0 0 $themePrimary;
+                }
+            }
+        }
+    }
+}