azion-theme 1.3.5

package/src/primevue-sass-theme/themes/material/extensions/_megamenu.scss

@@ -0,0 +1,19 @@
+.p-megamenu {
+    .p-menuitem {
+        &.p-highlight {
+            &.p-focus {
+                > .p-menuitem-content {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled) {
+            &.p-focus {
+                > .p-menuitem-content {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_menu.scss

@@ -0,0 +1,19 @@
+.p-menu {
+    .p-menuitem {
+        &.p-highlight {
+            &.p-focus {
+                > .p-menuitem-content {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled) {
+            &.p-focus {
+                > .p-menuitem-content {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_menubar.scss

@@ -0,0 +1,19 @@
+.p-menubar {
+    .p-menuitem {
+        &.p-highlight {
+            &.p-focus {
+                > .p-menuitem-content {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled) {
+            &.p-focus {
+                > .p-menuitem-content {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_mixins.scss

@@ -0,0 +1,113 @@
+@mixin filled-input() {
+    @include filled-input-default();
+    @include filled-input-interaction();
+}
+
+@mixin filled-input-wrapper() {
+    @include filled-input-wrapper-default();
+    @include filled-input-wrapper-interaction();
+}
+
+@mixin filled-input-default() {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: $inputFilledBg no-repeat;
+    background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, nth($inputBorder, 3), nth($inputBorder, 3));
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+}
+
+@mixin invalid-filled-input() {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+
+    &:enabled:hover {
+        border-color: transparent;
+        background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+    }
+
+    &:enabled:focus {
+        box-shadow: none;
+        border-color: transparent;
+    }
+}
+    
+@mixin filled-input-interaction() {
+    &:enabled:hover {
+        background-color: $inputFilledHoverBg;
+        border-color: transparent;
+        background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, $inputHoverBorderColor, $inputHoverBorderColor);
+    }
+
+    &:enabled:focus {
+        box-shadow: none;
+        background-color: $inputFilledFocusBg;
+        border-color: transparent;
+        background-size: 100% 2px, 100% 1px;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-filled-input();
+    }
+}
+
+@mixin filled-input-wrapper-default() {
+    @include filled-input-default();
+
+    .p-inputtext {
+        background-image: none;
+        background: transparent;
+    }
+}
+
+@mixin invalid-filled-input-wrapper() {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+
+    &:not(.p-disabled):hover {
+        background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+    }
+
+    &:not(.p-disabled).p-focus,
+    &:not(.p-disabled).p-inputwrapper-focus {
+        box-shadow: none;
+        background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+    }
+}
+
+@mixin filled-input-wrapper-interaction() {
+    &:not(.p-disabled):hover {
+        background-color: $inputFilledHoverBg;
+        border-color: transparent;
+        background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, $emphasis-high, $emphasis-high);
+    }
+
+    &:not(.p-disabled).p-focus,
+    &:not(.p-disabled).p-inputwrapper-focus {
+        box-shadow: none;
+        background-color: $inputFilledFocusBg;
+        border-color: transparent;
+        background-size: 100% 2px, 100% 1px;
+    }
+
+    .p-inputtext {
+        &:enabled:hover,
+        &:enabled:focus {
+            background-image: none;
+            background: transparent;
+        }
+    } 
+}
+
+@mixin filled-input-float-label() {
+    @if (nth($inputPadding, 1) == 1rem) {
+        padding-top: 1.5rem;
+        padding-bottom: .5rem;
+    }
+    @else if (nth($inputPadding, 1) == .75rem) {
+        padding-top: 1.25rem;
+        padding-bottom: .25rem;
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_multiselect.scss

@@ -0,0 +1,102 @@
+.p-multiselect {
+    .p-multiselect-label, .p-multiselect-trigger {
+        background-image: none;
+        background: transparent;
+    }
+
+    .p-multiselect-label {
+        border: 0 none;
+    }
+
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
+    }
+}
+
+.p-multiselect-panel { 
+    .p-multiselect-items {
+        .p-multiselect-item {
+            .p-ink {
+                background-color: rgba($primaryColor, .16);
+            }
+
+            &:focus {
+                background: $emphasis-lower;
+
+                &.p-highlight {
+                    background: rgba($primaryColor, .24);
+                }
+            }
+        }
+    }
+
+    .p-multiselect-close {
+        &:focus {
+            background: $emphasis-lower;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-multiselect {
+        @include filled-input-wrapper();
+
+        .p-multiselect-label {
+            &:hover {
+                background-image: none;
+                background: transparent;
+            }
+        }
+    }
+}
+
+.p-float-label {
+    .p-multiselect-label {
+        .p-multiselect-token {
+            padding: .25rem 1rem;
+            margin-top: .25rem;
+            margin-bottom: .25rem;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-float-label {
+        .p-multiselect {
+            .p-multiselect-label {
+                @include filled-input-float-label();
+            }
+        }
+        
+        .p-inputwrapper-filled {
+            &.p-multiselect {
+                .p-multiselect-label {
+                    @include filled-input-float-label();
+                }
+                
+                &.p-multiselect-chip {
+                    .p-multiselect-token {
+                        padding-top: 0;
+                        padding-bottom: 0;
+                        margin-top: 0;
+                        margin-bottom: 0;
+    
+                        .p-multiselect-token-icon {
+                            font-size: 75%;
+                        }
+                    }
+                }   
+            }
+        }
+    }
+
+    .p-multiselect.p-invalid {
+        @include invalid-filled-input-wrapper();
+    }
+}
+
+.p-multiselect.p-invalid {
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_orderlist.scss

@@ -0,0 +1,13 @@
+.p-orderlist {
+    .p-orderlist-list {
+        .p-orderlist-item {
+            &.p-focus {
+                background: $emphasis-lower;
+
+                &.p-highlight {
+                    background: rgba($primaryColor, .24);
+                }
+            }
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_overlaypanel.scss

@@ -0,0 +1,5 @@
+.p-overlaypanel {
+    .p-overlaypanel-content {
+        padding: 1.5rem;
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_paginator.scss

@@ -0,0 +1,13 @@
+.p-paginator {
+    justify-content: flex-end;
+
+    .p-paginator-element {
+        &:focus {
+            background: $emphasis-lower;
+
+            &.p-highlight {
+                background: rgba($primaryColor, .24);
+            }
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_panel.scss

@@ -0,0 +1,24 @@
+.p-panel {
+    border-radius: $borderRadius;
+    box-shadow: $cardShadow;
+
+    .p-panel-header,
+    .p-panel-content,
+    .p-panel-footer {
+        border: 0 none;
+    }
+
+    .p-panel-content {
+        padding-top: 0;
+    }
+
+    .p-panel-title {
+        font-size: 1.25rem;
+    }
+
+    .p-panel-header-icon {
+        &:focus {
+            background: $emphasis-lower;
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_panelmenu.scss

@@ -0,0 +1,66 @@
+.p-panelmenu {
+    .p-panelmenu-header {
+        .p-panelmenu-header-content {
+            .p-panelmenu-header-action {
+                .p-submenu-icon {
+                    order: 1;
+                    margin-left: auto;
+                    margin-right: 0;
+                }
+            }
+        }
+        
+        &.p-disabled {
+            opacity: 1;
+
+            .p-panelmenu-header-content > * {
+                opacity: $disabledOpacity;
+            }
+        }
+
+        &:focus, 
+        &.p-highlight:focus {
+            .p-panelmenu-header-content {
+                background: $accordionHeaderHoverBg;
+            }
+        }
+    }
+
+    .p-panelmenu-content {
+        .p-menuitem {
+            &.p-highlight {
+                &.p-focus {
+                    > .p-menuitem-content {
+                        background: $emphasis-lower;
+                    }
+                }
+            }
+    
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    > .p-menuitem-content {
+                        background: $emphasis-lower;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-panelmenu-panel {
+        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+        margin-bottom: 0;
+        border-radius: 0;
+        position: relative;
+        transition: margin-bottom 225ms;
+
+        &:first-child {
+            border-top-left-radius: $borderRadius;
+            border-top-right-radius: $borderRadius;
+        }
+
+        &:last-child {
+            border-bottom-left-radius: $borderRadius;
+            border-bottom-right-radius: $borderRadius;
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_password.scss

@@ -0,0 +1,15 @@
+.p-input-filled {
+    .p-password.p-invalid {
+        > .p-inputtext {
+            @include invalid-filled-input();
+        }
+    }
+}
+
+.p-password.p-invalid {
+    > .p-inputtext {
+        &:enabled:focus {
+            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_picklist.scss

@@ -0,0 +1,13 @@
+.p-picklist {
+    .p-picklist-list {
+        .p-picklist-item {
+            &.p-focus {
+                background: $emphasis-lower;
+
+                &.p-highlight {
+                    background: rgba($primaryColor, .24);
+                }
+            }
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_progressbar.scss

@@ -0,0 +1,9 @@
+.p-progressbar {
+    border-radius: 0;
+
+    &.p-progressbar-determinate {
+        .p-progressbar-label {
+            display: none;
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_radiobutton.scss

@@ -0,0 +1,50 @@
+.p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow $transitionDuration;
+
+    .p-radiobutton-box {
+        &:not(.p-disabled):not(.p-highlight):hover {
+            border: $radiobuttonBorder;
+        }
+
+        &:not(.p-disabled).p-focus {
+            border: $radiobuttonBorder;
+        }
+
+        &.p-highlight {
+            &:not(.p-disabled).p-focus {
+                border-color: $radiobuttonActiveBorderColor;
+            }
+        }
+    }
+
+    &:not(.p-radiobutton-disabled):hover {
+        box-shadow: 0 0 1px 10px rgba($overlayColor, .04);
+    }
+
+    &:not(.p-radiobutton-disabled).p-radiobutton-focused {
+        box-shadow: 0 0 1px 10px rgba($overlayColor, .12);
+    }
+
+    &.p-radiobutton-checked {
+        &:not(.p-radiobutton-disabled):hover {
+            box-shadow: 0 0 1px 10px rgba($radiobuttonActiveBorderColor, .04);
+        }
+    
+        &:not(.p-radiobutton-disabled).p-radiobutton-focused {
+            box-shadow: 0 0 1px 10px rgba($radiobuttonActiveBorderColor, .12);
+        }
+    }
+}
+
+.p-input-filled {
+    .p-radiobutton {
+        .p-radiobutton-box {
+            background-color: $inputBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputBg;
+            }
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_rating.scss

@@ -0,0 +1,30 @@
+.p-rating {
+    gap: 0;
+
+    .p-rating-item {
+        border-radius: 50%;
+        width: 2rem;
+        height: 2rem;
+        justify-content: center;
+
+        &.p-focus {
+            background: rgba($primaryColor, .12);
+
+            &.p-rating-cancel-item {
+                background: rgba($ratingCancelIconColor, .12);
+            }
+        }
+    }
+
+    &:not(.p-disabled):not(.p-readonly) {
+        .p-rating-item {
+            &:hover {
+                background-color: rgba(0,0,0,.04);
+
+                &.p-rating-cancel-item {
+                    background: rgba($ratingCancelIconColor, .04);
+                }
+            }
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_scrollpanel.scss

@@ -0,0 +1,7 @@
+.p-scrollpanel {
+    .p-scrollpanel-bar {
+        &:focus {
+            box-shadow: 0 0 1px 4px rgba($accentColor, .2);
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_selectbutton.scss

@@ -0,0 +1,13 @@
+.p-selectbutton {
+    .p-button {
+        &:focus {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+    
+            &.p-highlight {
+                background: $toggleButtonActiveHoverBg;
+                border-color: $toggleButtonActiveHoverBorderColor;
+            }
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_slider.scss

@@ -0,0 +1,16 @@
+.p-slider {
+    .p-slider-handle {
+        transition: transform $transitionDuration, box-shadow $transitionDuration;
+        transform: scale(.7);
+
+        &:focus {
+            box-shadow: 0 0 1px 10px rgba($accentColor, .2);
+        }
+    }
+
+    &.p-slider-sliding {
+        .p-slider-handle {
+            transform: scale(1);
+        }
+    }
+}

package/src/primevue-sass-theme/themes/material/extensions/_speeddial.scss

@@ -0,0 +1,5 @@
+.p-speeddial-item {
+    &.p-focus > .p-speeddial-action {
+        background: rgba($speedDialActionHoverBg, .76);
+    }
+}