azion-theme 1.3.5

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

@@ -0,0 +1,169 @@
+.p-calendar-w-btn {
+    border: $inputBorder;
+    background: $inputBg;
+    border-radius: $borderRadius;
+    transition: $formElementTransition;
+
+    .p-inputtext {
+        background-image: none;
+        background-color: transparent;
+        border: 0 none;
+
+        &:enabled:focus {
+            box-shadow: none;
+        }
+    }
+
+    .p-datepicker-trigger.p-button {
+        background-color: transparent;
+        border: 0 none;
+    
+        span {
+            color: $inputIconColor;
+        }
+
+        .p-icon {
+            path {
+                fill: $inputIconColor;
+            }
+        }
+
+        &:enabled:hover {
+            background: rgba($overlayColor, .04);
+        }
+
+        &:enabled:active,
+        &:focus {
+            background: rgba($overlayColor, .12);
+        }
+
+        &:disabled {
+            background-color: transparent !important;
+        }
+    }
+
+    &:not(.p-calendar-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-calendar-disabled).p-inputwrapper-focus {
+        border-color: $inputFocusBorderColor;
+        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-calendar-disabled {
+        opacity: $disabledOpacity;
+
+        .p-inputtext {
+            opacity: 1;   
+        }
+    }
+}
+
+.p-datepicker {
+    .p-datepicker-header {
+        border-bottom: 0 none;
+
+        .p-datepicker-title {
+            margin: 0 auto 0 0;
+            order: 1;
+
+            .p-datepicker-year:focus,
+            .p-datepicker-month:focus {
+                background: $emphasis-lower;
+            }
+        }
+    
+        .p-datepicker-prev {
+            order: 2;
+        }
+    
+        .p-datepicker-next {
+            order: 3;
+        }
+
+        .p-datepicker-prev:focus,
+        .p-datepicker-next:focus {
+            background: $emphasis-lower;
+        }
+    }
+
+    table {
+        th {
+            border-bottom: $calendarHeaderBorder;
+            color: $emphasis-low();
+            font-weight: 400;
+            font-size: .875rem;
+        }
+
+
+        td {
+            > span {
+                &:focus {
+                    background: $emphasis-lower;
+                }
+            }
+
+            &.p-datepicker-today {
+                > span {
+                    box-shadow: 0 0 0 1px rgba($overlayColor,.38);
+                }
+
+                &.p-highlight {
+                    box-shadow: 0 0 0 1px $highlightBg;
+                }
+            }
+        }
+    }
+}
+
+.p-calendar.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;
+        }
+    }
+
+    &.p-calendar-w-btn {
+        border-color: $inputErrorBorderColor;
+
+        .p-inputtext {
+            &:enabled:focus {
+                box-shadow: none;
+            }
+        }
+
+        &:not(.p-disabled).p-inputwrapper-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;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-calendar-w-btn {
+        @include filled-input-wrapper-default();
+
+        &:not(.p-calendar-disabled) {
+            @include filled-input-wrapper-interaction();
+        }
+
+        .p-inputtext {
+            border: 0 none;
+        }
+    }
+
+    .p-calendar.p-invalid {
+        .p-inputtext {
+            @include invalid-filled-input();
+        }
+
+        &.p-calendar-w-btn {
+            @include invalid-filled-input-wrapper();
+
+            .p-inputtext {
+                border: 0 none;
+                background-image: none;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+.p-carousel {
+    .p-carousel-indicators {
+
+        .p-carousel-indicator {
+            &.p-highlight {
+                button {
+                    background: $accentColor;
+                    color: $accentTextColor;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,61 @@
+.p-cascadeselect {
+    .p-cascadeselect-label, .p-dropdown-trigger {
+        background-image: none;
+        background: transparent;
+    }
+
+    .p-cascadeselect-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-cascadeselect-item-content {
+    .p-ink {
+        background-color: rgba($primaryColor, .16);
+    }
+}
+
+.p-input-filled {
+    .p-cascadeselect {
+        @include filled-input-wrapper();
+
+        .p-cascadeselect-label {
+            &:hover {
+                background-image: none;
+                background: transparent;
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-float-label {
+        .p-cascadeselect {
+            .p-cascadeselect-label {
+                @include filled-input-float-label();
+            }
+        }
+        
+        .p-inputwrapper-filled {
+            &.p-cascadeselect {
+                .p-cascadeselect-label {
+                    @include filled-input-float-label();
+                }
+            }
+        }
+    }
+
+    .p-cascadeselect.p-invalid {
+        @include invalid-filled-input-wrapper();
+    }
+}
+
+.p-cascadeselect.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/_checkbox.scss

@@ -0,0 +1,86 @@
+.p-checkbox {
+    border-radius: 50%;
+    transition: box-shadow $transitionDuration;
+
+    .p-checkbox-box {
+        border-color: nth($checkboxBorder, 3);
+        border-radius: 2px;
+        position: relative;
+
+        &:not(.p-disabled):hover {
+            border-color: nth($checkboxBorder, 3);
+        }
+
+        &:not(.p-disabled).p-focus {
+            border-color: nth($checkboxBorder, 3);
+        }
+
+        &.p-highlight {
+            &:not(.p-disabled).p-focus {
+                border-color: $checkboxActiveBorderColor;
+            }
+
+            .p-checkbox-icon.pi-check:before {
+                content: "";
+                position: absolute;
+                top: 6px;
+                left: 1px;
+                border-right: 2px solid transparent;
+                border-bottom: 2px solid transparent;
+                transform: rotate(45deg);
+                transform-origin: 0% 100%;
+                animation: checkbox-check 125ms 50ms linear forwards;
+            }
+        }
+    }
+
+    &:not(.p-checkbox-disabled):hover {
+        box-shadow: 0 0 1px 10px rgba($overlayColor, .04);
+    }
+
+    &:not(.p-checkbox-disabled).p-checkbox-focused {
+        box-shadow: 0 0 1px 10px rgba($overlayColor, .12);
+    }
+
+    &.p-checkbox-checked {
+        &:not(.p-checkbox-disabled):hover {
+            box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .04);
+        }
+    
+        &:not(.p-checkbox-disabled).p-checkbox-focused {
+            box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .12);
+        }
+    }
+}
+
+.p-input-filled {
+    .p-checkbox {
+        .p-checkbox-box {
+            background-color: $inputBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputBg;
+            }
+        }
+    }
+}
+
+@keyframes checkbox-check{
+    0%{
+      width: 0;
+      height: 0;
+      border-color: $checkboxIconActiveColor;
+      transform: translate3d(0,0,0) rotate(45deg);
+    }
+    33%{
+      width: 4px;
+      height: 0;
+      transform: translate3d(0,0,0) rotate(45deg);
+    }
+    100%{    
+      width: 4px;
+      height: 10px;    
+      border-color: $checkboxIconActiveColor;
+      transform: translate3d(0,-10px,0) rotate(45deg);
+    }
+  }

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

@@ -0,0 +1,54 @@
+.p-chips {
+    .p-chips-multiple-container {
+        &: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-input-filled {
+    .p-chips-multiple-container {
+        @include filled-input-wrapper();
+    }
+}
+
+.p-float-label {
+    .p-chips-multiple-container {
+        .p-chips-token {
+            padding: .25rem 1rem;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-float-label {
+        .p-chips {
+            .p-chips-multiple-container {
+                .p-chips-token {
+                    padding-top: 0;
+                    padding-bottom: 0;
+
+                    .p-chips-token-icon {
+                        font-size: 75%;
+                    }
+                }
+
+                .p-chips-input-token {
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    .p-chips.p-invalid {
+        .p-chips-multiple-container {
+            @include invalid-filled-input-wrapper();
+        }
+    }
+}
+
+.p-chips.p-invalid .p-chips-multiple-container {
+    &: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/_contextmenu.scss

@@ -0,0 +1,19 @@
+.p-contextmenu {
+    .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/_datatable.scss

@@ -0,0 +1,33 @@
+.p-datatable {
+    .p-sortable-column {
+        outline: 0 none;
+
+        &:focus {
+            background-color: rgba($overlayColor, 0.03);
+        }
+    }
+
+    .p-datatable-tbody {
+        > tr {
+            outline: 0 none;
+
+            &:not(.p-highlight):focus {
+                background-color: rgba($overlayColor, 0.03);                
+            }
+        }
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,40 @@
+.p-dropdown {
+    .p-inputtext, .p-dropdown-trigger {
+        background-image: none;
+        background: transparent;
+    }
+
+    .p-inputtext {
+        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-dropdown-item {
+    .p-ink {
+        background-color: rgba($primaryColor, .16);
+    }
+}
+
+.p-input-filled {
+    .p-dropdown {
+        @include filled-input-wrapper();
+
+        .p-inputtext {
+            border: 0 none;
+        }
+    }
+
+    .p-dropdown.p-invalid {
+        @include invalid-filled-input-wrapper();
+    }
+}
+
+.p-dropdown.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/_fieldset.scss

@@ -0,0 +1,15 @@
+.p-fieldset {
+    .p-fieldset-legend {
+        border: 0 none;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            a {
+                &:focus {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+    top: -.5rem !important;
+    background-color: $inputBg;
+    padding: 2px 4px;
+    margin-left: -4px;
+    margin-top: 0;
+}
+
+.p-float-label textarea ~ label {
+    margin-top: 0;
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label .p-inputwrapper-focus ~ label {
+    color: $inputFocusBorderColor;
+}
+
+.p-input-filled {
+    .p-float-label {
+        .p-inputtext {
+            @include filled-input-float-label();
+        }
+    
+        input:focus ~ label,
+        input.p-filled ~ label,
+        textarea:focus ~ label,
+        textarea.p-filled ~ label,
+        .p-inputwrapper-focus ~ label,
+        .p-inputwrapper-filled ~ label {
+            top: .25rem !important;
+            margin-top: 0;
+            background: transparent;
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+.p-galleria {
+    .p-galleria-indicators {
+        padding: $galleriaIndicatorsPadding;
+
+        .p-galleria-indicator {
+            &.p-highlight {
+                button {
+                    background: $accentColor;
+                    color: $accentTextColor;
+                }
+            }
+        }
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            .p-galleria-indicator {
+                &.p-highlight {
+                    button {
+                        background: rgba($accentColor, .68);
+                        color: $accentTextColor;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+.p-inputtext {
+    &:enabled: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-invalid {
+            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;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-inputtext {
+        @include filled-input();
+    }
+}

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

@@ -0,0 +1,32 @@
+.p-input-filled {
+    .p-inputgroup {
+        .p-inputgroup-addon {
+            @include filled-input-default();
+
+            &:last-child {
+                border-right-color: transparent;
+            }
+        }
+    }
+
+    .p-inputgroup-addon:first-child,
+    .p-inputgroup button:first-child,
+    .p-inputgroup input:first-child {
+        border-bottom-left-radius: 0;
+    }
+
+    .p-inputgroup .p-float-label:first-child input {
+        border-bottom-left-radius: 0;
+    }
+
+    .p-inputgroup-addon:last-child,
+    .p-inputgroup button:last-child,
+    .p-inputgroup input:last-child  {
+        border-bottom-right-radius: 0;
+    }
+
+    .p-inputgroup .p-float-label:last-child input {
+        border-bottom-right-radius: 0;
+    }
+}
+

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

@@ -0,0 +1,15 @@
+.p-inputnumber.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;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-inputnumber.p-invalid {
+        .p-inputtext {
+            @include invalid-filled-input();
+        }
+    }
+}

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

@@ -0,0 +1,32 @@
+.p-inputswitch {
+    .p-inputswitch-slider:before {
+        transition-property: box-shadow transform;
+        box-shadow: 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
+    }
+
+    &:not(.p-disabled):hover {
+        .p-inputswitch-slider:before {
+            box-shadow: 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12), 0 0 1px 10px rgba($overlayColor, .04), 
+        }
+    }
+
+    &.p-focus,
+    &.p-focus:not(.p-disabled):hover  {
+        .p-inputswitch-slider:before {
+            box-shadow: 0 0 1px 10px rgba($overlayColor, .12), 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
+        }
+    }
+
+    &.p-inputswitch-checked:not(.p-disabled):hover {
+        .p-inputswitch-slider:before {
+            box-shadow: 0 0 1px 10px rgba($inputSwitchHandleOnBg, .04), 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
+        }
+    }
+
+    &.p-inputswitch-checked.p-focus,
+    &.p-inputswitch-checked.p-focus:not(.p-disabled):hover {
+        .p-inputswitch-slider:before {
+            box-shadow: 0 0 1px 10px rgba($inputSwitchHandleOnBg, .12), 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+.p-listbox {
+    .p-listbox-list {
+        .p-listbox-item {
+            .p-ink {
+                background-color: rgba($primaryColor, .16);
+            }
+
+            &:focus {
+                background: $emphasis-lower;
+
+                &.p-highlight {
+                    background: rgba($primaryColor, .24);
+                }
+            }
+        }
+    }
+}