From c2379cb159cb364396175a8ff3660822f637aa34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 25 Sep 2023 18:04:42 +0300 Subject: [PATCH] Fixed #24 - New layer implementation --- themes/arya/_extensions.scss | 56 +- themes/bootstrap4/_vendor_extensions.scss | 20 +- themes/fluent/fluent-light/_extensions.scss | 364 +++++----- .../extensions/_vendor_extensions.scss | 105 +-- themes/mira/_extensions.scss | 642 +++++++++--------- themes/nova/_vendor_extensions.scss | 34 +- themes/rhea/_extensions.scss | 3 +- themes/rhea/_vendor_extensions.scss | 30 +- themes/saga/_extensions.scss | 40 +- themes/soho/soho-dark/_extensions.scss | 56 +- themes/soho/soho-light/_extensions.scss | 170 ++--- .../tailwind/tailwind-light/_extensions.scss | 222 +++--- themes/vela/_extensions.scss | 56 +- themes/viva/_extensions.scss | 310 ++++----- 14 files changed, 1067 insertions(+), 1041 deletions(-) diff --git a/themes/arya/_extensions.scss b/themes/arya/_extensions.scss index 8fc7fdc..a4be99f 100644 --- a/themes/arya/_extensions.scss +++ b/themes/arya/_extensions.scss @@ -1,36 +1,38 @@ -.p-carousel { - .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: $primaryColor; - } -} - -.p-galleria { - .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: $primaryColor; +@layer primevue { + .p-carousel { + .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: $primaryColor; + } } - - &.p-galleria-indicator-onitem { - .p-galleria-indicators { - .p-galleria-indicator { - &.p-highlight { - button { - background: $primaryColor; + + .p-galleria { + .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: $primaryColor; + } + + &.p-galleria-indicator-onitem { + .p-galleria-indicators { + .p-galleria-indicator { + &.p-highlight { + button { + background: $primaryColor; + } } } } } } -} - -.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; + + .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; + } } } } diff --git a/themes/bootstrap4/_vendor_extensions.scss b/themes/bootstrap4/_vendor_extensions.scss index dee3f33..45aaa1d 100644 --- a/themes/bootstrap4/_vendor_extensions.scss +++ b/themes/bootstrap4/_vendor_extensions.scss @@ -1,14 +1,16 @@ /* Vendor extensions to the designer enhanced bootstrap compatibility */ -.fc { - &.fc-theme-standard { - .fc-highlight { - background: $primaryAccentBg; +@layer primevue { + .fc { + &.fc-theme-standard { + .fc-highlight { + background: $primaryAccentBg; + } } } -} - -.p-fileupload { - .p-fileupload-content.p-fileupload-highlight { - background-color: $primaryAccentBg; + + .p-fileupload { + .p-fileupload-content.p-fileupload-highlight { + background-color: $primaryAccentBg; + } } } \ No newline at end of file diff --git a/themes/fluent/fluent-light/_extensions.scss b/themes/fluent/fluent-light/_extensions.scss index 3d2137b..28ce6f2 100644 --- a/themes/fluent/fluent-light/_extensions.scss +++ b/themes/fluent/fluent-light/_extensions.scss @@ -1,272 +1,274 @@ /* Customizations to the designer theme should be defined here */ -.p-button-label { - font-weight: 600; +@mixin disabled-input() { + background-color: $neutralLighter; + border-color: $neutralLighter; + color: $neutralTertiary; + opacity: 1; + user-select: none; } -.p-slider:not(.p-disabled):hover { - background-color: $themeLighter; +@mixin focused-input-field() { + box-shadow: inset 0 0 0 1px $themePrimary; +} - .p-slider-range { - background-color: $themePrimary; - } +@mixin focused-with-outline() { + box-shadow: none; + outline: 1px solid $focusOutlineColor; + outline-offset: 2px; +} - .p-slider-handle { - border-color: $themeDark; +@layer primevue { + .p-button-label { + font-weight: 600; } -} -.p-inputswitch { - width: 40px; - height: 20px; + .p-slider:not(.p-disabled):hover { + background-color: $themeLighter; - .p-inputswitch-slider { - border: $inputBorder; + .p-slider-range { + background-color: $themePrimary; + } - &:before { - width: 12px; - height: 12px; - margin-top: -6px; + .p-slider-handle { + border-color: $themeDark; } } - &:not(.p-disabled):hover { + .p-inputswitch { + width: 40px; + height: 20px; + .p-inputswitch-slider { - border-color: $inputHoverBorderColor; + border: $inputBorder; &:before { - background-color: $inputHoverBorderColor; + width: 12px; + height: 12px; + margin-top: -6px; } } - } - &.p-inputswitch-checked { &:not(.p-disabled):hover { .p-inputswitch-slider { - border-color: $inputSwitchSliderOnBg; - + border-color: $inputHoverBorderColor; + &:before { - background-color: $inputSwitchHandleOnBg; + background-color: $inputHoverBorderColor; } } } - .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-inputswitch-checked { + &:not(.p-disabled):hover { + .p-inputswitch-slider { + border-color: $inputSwitchSliderOnBg; + + &:before { + background-color: $inputSwitchHandleOnBg; + } + } + } - .p-datepicker-prev-icon:before { - content: "\e919"; + .p-inputswitch-slider { + border-color: $inputSwitchSliderOnBg; + } } } - .p-datepicker-next { - order: 3; - font-size: 90%; - - .p-datepicker-next-icon:before { - content: "\e91c"; + .p-datepicker { + .p-datepicker-header .p-datepicker-title { + order: 1; + margin: 0 auto 0 0; } - } - .p-datepicker-buttonbar { - border-top: 0 none; - } + .p-datepicker-prev { + order: 2; - .p-timepicker { - border-top: 0 none; + .p-datepicker-prev-icon:before { + content: "\e919"; + } + } - span { + .p-datepicker-next { + order: 3; font-size: 90%; - } - .pi-chevron-up:before { - content: "\e91c"; + .p-datepicker-next-icon:before { + content: "\e91c"; + } } - .pi-chevron-down:before { - content: "\e919"; + .p-datepicker-buttonbar { + border-top: 0 none; } - } - table { - font-size: 90%; + .p-timepicker { + border-top: 0 none; - td { - &.p-datepicker-today { - > span { - border-radius: 50%; - } + span { + font-size: 90%; + } + + .pi-chevron-up:before { + content: "\e91c"; + } + + .pi-chevron-down:before { + content: "\e919"; } } - } - .p-datepicker-buttonbar { - .p-button { + table { font-size: 90%; - color: $textColor; - - .p-button-label { - font-weight: 400; + + td { + &.p-datepicker-today { + > span { + border-radius: 50%; + } + } } + } - &:enabled:hover { + .p-datepicker-buttonbar { + .p-button { + font-size: 90%; color: $textColor; - background-color:$neutralLighter; + + .p-button-label { + font-weight: 400; + } + + &:enabled:hover { + color: $textColor; + background-color:$neutralLighter; + } } } - } - .p-monthpicker { - .p-monthpicker-month { - padding: .5rem 0; + .p-monthpicker { + .p-monthpicker-month { + padding: .5rem 0; + } } } -} -.p-datatable { - font-size: 90%; -} - -.p-toast { - font-size: 90%; - - .p-toast-icon-close-icon { + .p-datatable { font-size: 90%; } -} -.p-message { - font-size: 90%; + .p-toast { + font-size: 90%; - .p-message-close { - .p-message-close-icon { + .p-toast-icon-close-icon { font-size: 90%; } } -} -.p-tooltip { - .p-tooltip-text { + .p-message { font-size: 90%; - } -} -.p-component { - .p-menu-separator { - border-color: #eeeeee; + .p-message-close { + .p-message-close-icon { + font-size: 90%; + } + } } -} - -.p-submenu-icon { - color: $textSecondaryColor !important; -} - -.p-menuitem-active .p-submenu-icon { - color: $textColor !important; -} -.p-progressbar-label { - display: none !important; -} + .p-tooltip { + .p-tooltip-text { + font-size: 90%; + } + } -.p-carousel { - .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: $themePrimary; + .p-component { + .p-menu-separator { + border-color: #eeeeee; + } } -} -.p-galleria { - .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: $themePrimary; + .p-submenu-icon { + color: $textSecondaryColor !important; } -} -@mixin disabled-input() { - background-color: $neutralLighter; - border-color: $neutralLighter; - color: $neutralTertiary; - opacity: 1; - user-select: none; -} + .p-menuitem-active .p-submenu-icon { + color: $textColor !important; + } -@mixin focused-input-field() { - box-shadow: inset 0 0 0 1px $themePrimary; -} + .p-progressbar-label { + display: none !important; + } -@mixin focused-with-outline() { - box-shadow: none; - outline: 1px solid $focusOutlineColor; - outline-offset: 2px; -} + .p-carousel { + .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: $themePrimary; + } + } -.p-inputtext { - &:disabled { - @include disabled-input(); + .p-galleria { + .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: $themePrimary; + } } - &:enabled:focus { - @include focused-input-field(); - } -} + .p-inputtext { + &:disabled { + @include disabled-input(); + } -.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(); + &:enabled:focus { + @include focused-input-field(); + } } - &:not(.p-disabled).p-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, + .p-multiselect { + &.p-disabled { + @include disabled-input(); - .p-dropdown-label, - .p-dropdown-trigger-icon { - color: $neutralTertiary; + .p-dropdown-label, + .p-dropdown-trigger-icon { + color: $neutralTertiary; + } } - } - &:not(.p-disabled).p-focus { - @include focused-input-field(); + &: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-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 { + .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; + &.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 $themePrimary; + } } } } -} +} \ No newline at end of file diff --git a/themes/material/extensions/_vendor_extensions.scss b/themes/material/extensions/_vendor_extensions.scss index 326094c..52ca280 100644 --- a/themes/material/extensions/_vendor_extensions.scss +++ b/themes/material/extensions/_vendor_extensions.scss @@ -1,52 +1,55 @@ @import './_mixins'; -@import './_accordion'; -@import './_autocomplete'; -@import './_breadcrumb'; -@import './_button'; -@import './_calendar'; -@import './_carousel'; -@import './_cascadeselect'; -@import './_checkbox'; -@import './_chips'; -@import './_contextmenu'; -@import './_datatable'; -@import './_dropdown'; -@import './_fullcalendar'; -@import './_galleria'; -@import './_input'; -@import './_inputgroup'; -@import './_inputnumber'; -@import './_inputswitch'; -@import './_fieldset'; -@import './_float_label'; -@import './_listbox'; -@import './_megamenu'; -@import './_menu'; -@import './_menubar'; -@import './_multiselect'; -@import './_orderlist'; -@import './_overlaypanel'; -@import './_paginator'; -@import './_password'; -@import './_panel'; -@import './_panelmenu'; -@import './_picklist'; -@import './_progressbar'; -@import './_rating'; -@import './_radiobutton'; -@import './_scrollpanel'; -@import './_selectbutton'; -@import './_slider'; -@import './_speeddial'; -@import './_splitbutton'; -@import './_splitter'; -@import './_steps'; -@import './_tabview'; -@import './_tieredmenu'; -@import './_toolbar'; -@import './_tooltip'; -@import './_tree'; -@import './_treeselect'; -@import './_treetable'; -@import './_tabmenu'; -@import './_togglebutton'; \ No newline at end of file + +@layer primevue { + @import './_accordion'; + @import './_autocomplete'; + @import './_breadcrumb'; + @import './_button'; + @import './_calendar'; + @import './_carousel'; + @import './_cascadeselect'; + @import './_checkbox'; + @import './_chips'; + @import './_contextmenu'; + @import './_datatable'; + @import './_dropdown'; + @import './_fullcalendar'; + @import './_galleria'; + @import './_input'; + @import './_inputgroup'; + @import './_inputnumber'; + @import './_inputswitch'; + @import './_fieldset'; + @import './_float_label'; + @import './_listbox'; + @import './_megamenu'; + @import './_menu'; + @import './_menubar'; + @import './_multiselect'; + @import './_orderlist'; + @import './_overlaypanel'; + @import './_paginator'; + @import './_password'; + @import './_panel'; + @import './_panelmenu'; + @import './_picklist'; + @import './_progressbar'; + @import './_rating'; + @import './_radiobutton'; + @import './_scrollpanel'; + @import './_selectbutton'; + @import './_slider'; + @import './_speeddial'; + @import './_splitbutton'; + @import './_splitter'; + @import './_steps'; + @import './_tabview'; + @import './_tieredmenu'; + @import './_toolbar'; + @import './_tooltip'; + @import './_tree'; + @import './_treeselect'; + @import './_treetable'; + @import './_tabmenu'; + @import './_togglebutton'; +} \ No newline at end of file diff --git a/themes/mira/_extensions.scss b/themes/mira/_extensions.scss index 8b2ca19..27e100f 100644 --- a/themes/mira/_extensions.scss +++ b/themes/mira/_extensions.scss @@ -4,438 +4,440 @@ box-shadow: inset 0 0 0 .1rem $primaryColorAlt; } -//inputtext -.p-inputtext { - &:enabled:hover { - background-color: $white100; - } - - &:enabled:focus { - background-color: $white; - } -} - -//chips -.p-chips { - .p-chips-multiple-container { - &:not(.p-disabled):hover { +@layer primevue { + //inputtext + .p-inputtext { + &:enabled:hover { background-color: $white100; } - - &:not(.p-disabled).p-focus { + + &:enabled:focus { background-color: $white; } } -} - -//autocomplete -.p-autocomplete { - .p-autocomplete-panel { - .p-autocomplete-item{ + + //chips + .p-chips { + .p-chips-multiple-container { &:not(.p-disabled):hover { - @include list-item-hover(); + background-color: $white100; + } + + &:not(.p-disabled).p-focus { + background-color: $white; } } } - - &.p-autocomplete-multiple { - .p-autocomplete-multiple-container { - &:not(.p-disabled):hover { - background-color: $white100; + + //autocomplete + .p-autocomplete { + .p-autocomplete-panel { + .p-autocomplete-item{ + &:not(.p-disabled):hover { + @include list-item-hover(); + } + } + } + + &.p-autocomplete-multiple { + .p-autocomplete-multiple-container { + &:not(.p-disabled):hover { + background-color: $white100; + } } } } -} - -//dropdown -.p-dropdown { - &:not(.p-disabled):hover { - background-color: $white100; + + //dropdown + .p-dropdown { + &:not(.p-disabled):hover { + background-color: $white100; + } } -} - -.p-dropdown-panel { - .p-dropdown-items { - .p-dropdown-item { - &:not(.p-highlight):not(.p-disabled):hover { - @include list-item-hover(); + + .p-dropdown-panel { + .p-dropdown-items { + .p-dropdown-item { + &:not(.p-highlight):not(.p-disabled):hover { + @include list-item-hover(); + } } } } -} - -//listbox -.p-listbox { - &:not(.p-disabled) { - .p-listbox-item { - &:not(.p-disabled):hover { - @include list-item-hover(); + + //listbox + .p-listbox { + &:not(.p-disabled) { + .p-listbox-item { + &:not(.p-disabled):hover { + @include list-item-hover(); + } } } } -} - -//multiselect -.p-multiselect-panel { - .p-multiselect-items { - .p-multiselect-item { - &:not(.p-highlight):not(.p-disabled):hover { - @include list-item-hover(); + + //multiselect + .p-multiselect-panel { + .p-multiselect-items { + .p-multiselect-item { + &:not(.p-highlight):not(.p-disabled):hover { + @include list-item-hover(); + } } } } -} - -.p-multiselect { - &:not(.p-disabled):hover { - background-color: $white100; - } -} - -//button -.p-button { - font-weight: 500; -} - -//radio -.p-radiobutton { - .p-radiobutton-box { - &:not(.p-disabled):not(.p-highlight):hover { - background-color: $white300;; - } - - &:not(.p-disabled).p-focus { - border-color: transparent; + + .p-multiselect { + &:not(.p-disabled):hover { + background-color: $white100; } } -} - -//checkbox -.p-checkbox { - &:not(.p-checkbox-disabled) { - .p-checkbox-box { - &:hover { - background-color: $white300; + + //button + .p-button { + font-weight: 500; + } + + //radio + .p-radiobutton { + .p-radiobutton-box { + &:not(.p-disabled):not(.p-highlight):hover { + background-color: $white300;; } - - &.p-focus { + + &:not(.p-disabled).p-focus { border-color: transparent; } } } -} - -//accordion -.p-accordion { - .p-accordion-header { - &:not(.p-highlight):not(.p-disabled):hover { - &:not(.p-disabled) { - .p-accordion-header-link { - &:focus { - @include list-item-hover(); - } + + //checkbox + .p-checkbox { + &:not(.p-checkbox-disabled) { + .p-checkbox-box { + &:hover { + background-color: $white300; + } + + &.p-focus { + border-color: transparent; } - } - - .p-accordion-header-link { - @include list-item-hover(); } } - - &:not(.p-disabled).p-highlight { - &:hover { + } + + //accordion + .p-accordion { + .p-accordion-header { + &:not(.p-highlight):not(.p-disabled):hover { + &:not(.p-disabled) { + .p-accordion-header-link { + &:focus { + @include list-item-hover(); + } + } + } + .p-accordion-header-link { @include list-item-hover(); } } - } - } -} - -//calendar -.p-datepicker { - table { - td { - > span { - &.p-highlight { - color: $white; - background: $primaryColor; - &:hover { - background-color: $primaryColorAlt; - border:2px solid $primaryColor; + + &:not(.p-disabled).p-highlight { + &:hover { + .p-accordion-header-link { + @include list-item-hover(); } } } - &.p-datepicker-today { + } + } + + //calendar + .p-datepicker { + table { + td { > span { &.p-highlight { color: $white; background: $primaryColor; + &:hover { + background-color: $primaryColorAlt; + border:2px solid $primaryColor; + } } } - } - } - } -} - -//fieldset -.p-fieldset { - &.p-fieldset-toggleable { - .p-fieldset-legend { - &:hover { - @include list-item-hover(); + &.p-datepicker-today { + > span { + &.p-highlight { + color: $white; + background: $primaryColor; + } + } + } } } } -} - -//menubar -.p-menubar { - .p-menuitem-link { - &:not(.p-disabled):hover { - @include list-item-hover(); - } - } - - .p-menubar-root-list { - > .p-menuitem { - > .p-menuitem-link { - &:not(.p-disabled):hover { + + //fieldset + .p-fieldset { + &.p-fieldset-toggleable { + .p-fieldset-legend { + &:hover { @include list-item-hover(); } } } } -} - -//tieredmenu -.p-tieredmenu { - .p-menuitem-link { - &:not(.p-disabled):hover { - @include list-item-hover(); - } - } -} - -//menu -.p-menu { - .p-menuitem-link { - &:not(.p-disabled):hover { - @include list-item-hover(); + + //menubar + .p-menubar { + .p-menuitem-link { + &:not(.p-disabled):hover { + @include list-item-hover(); + } } - } -} - -//contextmenu -.p-contextmenu { - .p-menuitem-link { - &:not(.p-disabled):hover { - @include list-item-hover(); + + .p-menubar-root-list { + > .p-menuitem { + > .p-menuitem-link { + &:not(.p-disabled):hover { + @include list-item-hover(); + } + } + } } } -} - -//paginator -.p-paginator { - .p-paginator-first, - .p-paginator-prev, - .p-paginator-next, - .p-paginator-last { - &:not(.p-disabled):not(.p-highlight):hover { - border: 1px solid $primaryColor; + + //tieredmenu + .p-tieredmenu { + .p-menuitem-link { + &:not(.p-disabled):hover { + @include list-item-hover(); + } } } - - .p-paginator-pages { - .p-paginator-page { - &:not(.p-highlight):hover { - border: 1px solid $primaryColor; + + //menu + .p-menu { + .p-menuitem-link { + &:not(.p-disabled):hover { + @include list-item-hover(); } } } -} - -//table -.p-datatable { - .p-sortable-column { - &:not(.p-highlight):hover { - @include list-item-hover(); - } - &.p-highlight { - background-color: $white300; - &:hover { + + //contextmenu + .p-contextmenu { + .p-menuitem-link { + &:not(.p-disabled):hover { @include list-item-hover(); } } } - - &.p-datatable-hoverable-rows { - .p-datatable-tbody > tr:not(.p-highlight):hover { - outline: 1px solid $primaryColorAlt; + + //paginator + .p-paginator { + .p-paginator-first, + .p-paginator-prev, + .p-paginator-next, + .p-paginator-last { + &:not(.p-disabled):not(.p-highlight):hover { + border: 1px solid $primaryColor; + } } - } -} - -//overlaypanel -.p-overlaypanel { - .p-overlaypanel-close { - &:enabled:hover { - background: $buttonHoverBg; - color: $buttonTextHoverColor; - border: 2px solid $buttonHoverBorderColor; + + .p-paginator-pages { + .p-paginator-page { + &:not(.p-highlight):hover { + border: 1px solid $primaryColor; + } + } } } -} - -//picklist -.p-picklist { - .p-picklist-list { - .p-picklist-item { + + //table + .p-datatable { + .p-sortable-column { &:not(.p-highlight):hover { @include list-item-hover(); } - } - } -} - -//tree -.p-tree { - &.p-tree-horizontal { - .p-treenode { - .p-treenode-content { - &.p-treenode-selectable:not(.p-highlight):hover { - background: $white; + &.p-highlight { + background-color: $white300; + &:hover { @include list-item-hover(); } } } - } -} - -//treetable -.p-treetable { - .p-sortable-column { - &:not(.p-highlight):hover { - @include list-item-hover(); - } - - &.p-highlight { - background-color: $white300; - &:hover { - background-color: $white; - @include list-item-hover(); + + &.p-datatable-hoverable-rows { + .p-datatable-tbody > tr:not(.p-highlight):hover { + outline: 1px solid $primaryColorAlt; } } - - &:focus { - box-shadow: inset $focusShadow; - outline: 0 none; - } } - - &.p-treetable-hoverable-rows { - .p-treetable-tbody > tr:not(.p-highlight):hover { - outline: 1px solid $primaryColorAlt; + + //overlaypanel + .p-overlaypanel { + .p-overlaypanel-close { + &:enabled:hover { + background: $buttonHoverBg; + color: $buttonTextHoverColor; + border: 2px solid $buttonHoverBorderColor; + } } } -} - -//megamenu -.p-megamenu { - .p-megamenu-root-list { - > .p-menuitem { - > .p-menuitem-link { - &:not(.p-disabled):hover { + + //picklist + .p-picklist { + .p-picklist-list { + .p-picklist-item { + &:not(.p-highlight):hover { @include list-item-hover(); } } } } - - .p-menuitem-link { - &:not(.p-disabled):hover { - @include list-item-hover(); + + //tree + .p-tree { + &.p-tree-horizontal { + .p-treenode { + .p-treenode-content { + &.p-treenode-selectable:not(.p-highlight):hover { + background: $white; + @include list-item-hover(); + } + } + } } } -} - -//panelmenu -.p-panelmenu { - .p-panelmenu-header { - &:not(.p-highlight):not(.p-disabled) { - > a:hover { + + //treetable + .p-treetable { + .p-sortable-column { + &:not(.p-highlight):hover { @include list-item-hover(); } + + &.p-highlight { + background-color: $white300; + &:hover { + background-color: $white; + @include list-item-hover(); + } + } + + &:focus { + box-shadow: inset $focusShadow; + outline: 0 none; + } } - - &.p-highlight { - &:not(.p-disabled) { - > a { - &:hover { + + &.p-treetable-hoverable-rows { + .p-treetable-tbody > tr:not(.p-highlight):hover { + outline: 1px solid $primaryColorAlt; + } + } + } + + //megamenu + .p-megamenu { + .p-megamenu-root-list { + > .p-menuitem { + > .p-menuitem-link { + &:not(.p-disabled):hover { @include list-item-hover(); } } } } + + .p-menuitem-link { + &:not(.p-disabled):hover { + @include list-item-hover(); + } + } } - .p-panelmenu-content { - .p-menuitem { - .p-menuitem-link { - &:not(.p-disabled):hover { + //panelmenu + .p-panelmenu { + .p-panelmenu-header { + &:not(.p-highlight):not(.p-disabled) { + > a:hover { @include list-item-hover(); } } + + &.p-highlight { + &:not(.p-disabled) { + > a { + &:hover { + @include list-item-hover(); + } + } + } + } + } + + .p-panelmenu-content { + .p-menuitem { + .p-menuitem-link { + &:not(.p-disabled):hover { + @include list-item-hover(); + } + } + } } } -} - -//slidemenu -.p-slidemenu { - .p-menuitem-link { - &:not(.p-disabled):hover { - @include list-item-hover(); + + //slidemenu + .p-slidemenu { + .p-menuitem-link { + &:not(.p-disabled):hover { + @include list-item-hover(); + } } } -} - -//carousel -.p-carousel { - .p-carousel-indicators { - .p-carousel-indicator { - &.p-highlight { - button { - background: $primaryColor; - color: $white; + + //carousel + .p-carousel { + .p-carousel-indicators { + .p-carousel-indicator { + &.p-highlight { + button { + background: $primaryColor; + color: $white; + } } } } } -} - -//galleria -.p-galleria { - .p-galleria-indicators { - .p-galleria-indicator { - &.p-highlight { - button { - background: $primaryColor; - color: $white; + + //galleria + .p-galleria { + .p-galleria-indicators { + .p-galleria-indicator { + &.p-highlight { + button { + background: $primaryColor; + color: $white; + } } } } } -} - -.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; + + .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; + } } } } diff --git a/themes/nova/_vendor_extensions.scss b/themes/nova/_vendor_extensions.scss index e6e3050..0c7fe81 100644 --- a/themes/nova/_vendor_extensions.scss +++ b/themes/nova/_vendor_extensions.scss @@ -1,22 +1,24 @@ -.p-panel { - .p-panel-header { - .p-panel-header-icon { - color: $containerHeaderIconColor; - - &:enabled:hover { - color: $containerHeaderIconHoverColor; +@layer primevue { + .p-panel { + .p-panel-header { + .p-panel-header-icon { + color: $containerHeaderIconColor; + + &:enabled:hover { + color: $containerHeaderIconHoverColor; + } } } } -} - -.p-dialog { - .p-dialog-header { - .p-dialog-header-icon { - color: $containerHeaderIconColor; - - &:enabled:hover { - color: $containerHeaderIconHoverColor; + + .p-dialog { + .p-dialog-header { + .p-dialog-header-icon { + color: $containerHeaderIconColor; + + &:enabled:hover { + color: $containerHeaderIconHoverColor; + } } } } diff --git a/themes/rhea/_extensions.scss b/themes/rhea/_extensions.scss index d701376..e0c0c35 100644 --- a/themes/rhea/_extensions.scss +++ b/themes/rhea/_extensions.scss @@ -1,3 +1,2 @@ +/* Customizations to the designer theme should be defined here */ @import './vendor_extensions'; - -/* Customizations to the designer theme should be defined here */ \ No newline at end of file diff --git a/themes/rhea/_vendor_extensions.scss b/themes/rhea/_vendor_extensions.scss index 1f90eca..83e600a 100644 --- a/themes/rhea/_vendor_extensions.scss +++ b/themes/rhea/_vendor_extensions.scss @@ -1,22 +1,24 @@ -.p-panel { - .p-panel-header { - .p-panel-header-icon { - color: $primaryTextColor; - - &:enabled:hover { +@layer primevue { + .p-panel { + .p-panel-header { + .p-panel-header-icon { color: $primaryTextColor; + + &:enabled:hover { + color: $primaryTextColor; + } } } } -} - -.p-dialog { - .p-dialog-header { - .p-dialog-header-icon { - color: $primaryTextColor; - - &:enabled:hover { + + .p-dialog { + .p-dialog-header { + .p-dialog-header-icon { color: $primaryTextColor; + + &:enabled:hover { + color: $primaryTextColor; + } } } } diff --git a/themes/saga/_extensions.scss b/themes/saga/_extensions.scss index f07644e..5233d4a 100644 --- a/themes/saga/_extensions.scss +++ b/themes/saga/_extensions.scss @@ -1,24 +1,26 @@ -.p-carousel { - .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: $primaryColor; +@layer primevue { + .p-carousel { + .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: $primaryColor; + } } -} - -.p-galleria { - .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: $primaryColor; + + .p-galleria { + .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: $primaryColor; + } } -} - -.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; + + .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; + } } } } diff --git a/themes/soho/soho-dark/_extensions.scss b/themes/soho/soho-dark/_extensions.scss index 8fc7fdc..a4be99f 100644 --- a/themes/soho/soho-dark/_extensions.scss +++ b/themes/soho/soho-dark/_extensions.scss @@ -1,36 +1,38 @@ -.p-carousel { - .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: $primaryColor; - } -} - -.p-galleria { - .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: $primaryColor; +@layer primevue { + .p-carousel { + .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: $primaryColor; + } } - - &.p-galleria-indicator-onitem { - .p-galleria-indicators { - .p-galleria-indicator { - &.p-highlight { - button { - background: $primaryColor; + + .p-galleria { + .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: $primaryColor; + } + + &.p-galleria-indicator-onitem { + .p-galleria-indicators { + .p-galleria-indicator { + &.p-highlight { + button { + background: $primaryColor; + } } } } } } -} - -.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; + + .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; + } } } } diff --git a/themes/soho/soho-light/_extensions.scss b/themes/soho/soho-light/_extensions.scss index 0f88ac5..99b8c5d 100644 --- a/themes/soho/soho-light/_extensions.scss +++ b/themes/soho/soho-light/_extensions.scss @@ -1,113 +1,115 @@ /* Customizations to the designer theme should be defined here */ -.p-datepicker { - .p-datepicker-header { - .p-datepicker-prev, - .p-datepicker-next { - color: $primaryTextColor; - - &:enabled:hover { +@layer primevue { + .p-datepicker { + .p-datepicker-header { + .p-datepicker-prev, + .p-datepicker-next { color: $primaryTextColor; - background-color: rgba(255,255,255,.2); + + &:enabled:hover { + color: $primaryTextColor; + background-color: rgba(255,255,255,.2); + } } } - } - - &.p-datepicker-multiple-month { - .p-datepicker-group { - border-right: 1px solid rgba(255,255,255,.2); - } - } - - .p-datepicker-buttonbar { - border-top: 1px solid rgba(255,255,255,.2); - - .p-button { - color: $primaryTextColor; - - &:enabled:hover { - color: $primaryTextColor; - background-color: rgba(255,255,255,.2); + + &.p-datepicker-multiple-month { + .p-datepicker-group { + border-right: 1px solid rgba(255,255,255,.2); } } - } - - .p-timepicker { - border-top: 1px solid rgba(255,255,255,.2); - - .p-link { - color: $primaryTextColor; - - &:enabled:hover { + + .p-datepicker-buttonbar { + border-top: 1px solid rgba(255,255,255,.2); + + .p-button { color: $primaryTextColor; - background-color: rgba(255,255,255,.2); + + &:enabled:hover { + color: $primaryTextColor; + background-color: rgba(255,255,255,.2); + } } } - } - - table { - font-size: $fontSize; - margin: $calendarTableMargin; - - th { - color: rgba(255,255,255,.7); - } - - td { - > span { - &.p-highlight { + + .p-timepicker { + border-top: 1px solid rgba(255,255,255,.2); + + .p-link { + color: $primaryTextColor; + + &:enabled:hover { color: $primaryTextColor; - background: rgba(255,255,255,.3); + background-color: rgba(255,255,255,.2); } } - - &.p-datepicker-today { + } + + table { + font-size: $fontSize; + margin: $calendarTableMargin; + + th { + color: rgba(255,255,255,.7); + } + + td { > span { &.p-highlight { color: $primaryTextColor; background: rgba(255,255,255,.3); } } + + &.p-datepicker-today { + > span { + &.p-highlight { + color: $primaryTextColor; + background: rgba(255,255,255,.3); + } + } + } } } - } - - .p-monthpicker { - .p-monthpicker-month { - &.p-highlight { - color: $primaryTextColor; - background: rgba(255,255,255,.3); + + .p-monthpicker { + .p-monthpicker-month { + &.p-highlight { + color: $primaryTextColor; + background: rgba(255,255,255,.3); + } } } } -} - -.p-button { - .p-button-label { - font-weight: 700; + + .p-button { + .p-button-label { + font-weight: 700; + } } -} - -.p-carousel { - .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: $primaryColor; + + .p-carousel { + .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: $primaryColor; + } } -} - -.p-galleria { - .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: $primaryColor; + + .p-galleria { + .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: $primaryColor; + } } -} - -.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; + + .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; + } } } } diff --git a/themes/tailwind/tailwind-light/_extensions.scss b/themes/tailwind/tailwind-light/_extensions.scss index 3fdb6b9..e314ca9 100644 --- a/themes/tailwind/tailwind-light/_extensions.scss +++ b/themes/tailwind/tailwind-light/_extensions.scss @@ -3,137 +3,139 @@ box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 0.0); } -.p-inputtext, .p-togglebutton, .p-selectbutton, .p-inputgroup { - box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0, 0, 0, 0.05); -} - -.p-inputgroup { - .p-inputtext, .p-togglebutton, .p-selectbutton { - box-shadow: none; - } -} - -.p-inputtext { - &.p-invalid.p-component:enabled:focus { - box-shadow: 0 0 0 1px $inputErrorBorderColor; - } -} - -.p-highlight { - font-weight: 600; -} - -.p-button-label { - font-weight: 500; -} - -.p-inputswitch { - &.p-focus { - .p-inputswitch-slider { - box-shadow: 0 0 0 2px $focusOutlineColor; +@layer primevue { + .p-inputtext, .p-togglebutton, .p-selectbutton, .p-inputgroup { + box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0, 0, 0, 0.05); + } + + .p-inputgroup { + .p-inputtext, .p-togglebutton, .p-selectbutton { + box-shadow: none; } } -} - -.p-paginator { - .p-paginator-pages { - .p-paginator-page { - margin-left: -1px; - - &.p-highlight { - border-color: $primaryColor; - margin-right: 1px; - } + + .p-inputtext { + &.p-invalid.p-component:enabled:focus { + box-shadow: 0 0 0 1px $inputErrorBorderColor; } } - - .p-paginator-current { - border: 0 none; - } -} - -.p-button { - &:focus { - @include focused-ring($focusOutlineColor); - } - - &.p-button-secondary:enabled:focus { - @include focused-ring($secondaryButtonBg); + + .p-highlight { + font-weight: 600; } - - &.p-button-success:enabled:focus { - @include focused-ring($successButtonBg); + + .p-button-label { + font-weight: 500; } - - &.p-button-info:enabled:focus { - @include focused-ring($infoButtonBg); - } - - &.p-button-warning:enabled:focus { - @include focused-ring($warningButtonBg); - } - - &.p-button-help:enabled:focus { - @include focused-ring($helpButtonBg); + + .p-inputswitch { + &.p-focus { + .p-inputswitch-slider { + box-shadow: 0 0 0 2px $focusOutlineColor; + } + } } - - &.p-button-danger:enabled:focus { - @include focused-ring($dangerButtonBg); + + .p-paginator { + .p-paginator-pages { + .p-paginator-page { + margin-left: -1px; + + &.p-highlight { + border-color: $primaryColor; + margin-right: 1px; + } + } + } + + .p-paginator-current { + border: 0 none; + } } -} - -.p-checkbox { - .p-checkbox-box { - border-radius: .25rem; + + .p-button { + &:focus { + @include focused-ring($focusOutlineColor); + } + + &.p-button-secondary:enabled:focus { + @include focused-ring($secondaryButtonBg); + } + + &.p-button-success:enabled:focus { + @include focused-ring($successButtonBg); + } + + &.p-button-info:enabled:focus { + @include focused-ring($infoButtonBg); + } + + &.p-button-warning:enabled:focus { + @include focused-ring($warningButtonBg); + } + + &.p-button-help:enabled:focus { + @include focused-ring($helpButtonBg); + } + + &.p-button-danger:enabled:focus { + @include focused-ring($dangerButtonBg); + } } - &:not(.p-checkbox-disabled) { + .p-checkbox { .p-checkbox-box { - &.p-focus { - @include focused-ring($focusOutlineColor); + border-radius: .25rem; + } + + &:not(.p-checkbox-disabled) { + .p-checkbox-box { + &.p-focus { + @include focused-ring($focusOutlineColor); + } } } } -} - -.p-radiobutton { - &:not(.p-radiobutton-disabled) { - .p-radiobutton-box { - &.p-focus { - @include focused-ring($focusOutlineColor); + + .p-radiobutton { + &:not(.p-radiobutton-disabled) { + .p-radiobutton-box { + &.p-focus { + @include focused-ring($focusOutlineColor); + } } } } -} - -.p-carousel { - .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: $primaryColor; + + .p-carousel { + .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: $primaryColor; + } } -} - -.p-galleria { - .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: $primaryColor; + + .p-galleria { + .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: $primaryColor; + } } -} - -.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; + + .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; + } } } } -} - -.p-speeddial-item { - &.p-focus > .p-speeddial-action { - @include focused-ring($focusOutlineColor); + + .p-speeddial-item { + &.p-focus > .p-speeddial-action { + @include focused-ring($focusOutlineColor); + } } } \ No newline at end of file diff --git a/themes/vela/_extensions.scss b/themes/vela/_extensions.scss index 8fc7fdc..a4be99f 100644 --- a/themes/vela/_extensions.scss +++ b/themes/vela/_extensions.scss @@ -1,36 +1,38 @@ -.p-carousel { - .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: $primaryColor; - } -} - -.p-galleria { - .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: $primaryColor; +@layer primevue { + .p-carousel { + .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: $primaryColor; + } } - - &.p-galleria-indicator-onitem { - .p-galleria-indicators { - .p-galleria-indicator { - &.p-highlight { - button { - background: $primaryColor; + + .p-galleria { + .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: $primaryColor; + } + + &.p-galleria-indicator-onitem { + .p-galleria-indicators { + .p-galleria-indicator { + &.p-highlight { + button { + background: $primaryColor; + } } } } } } -} - -.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; + + .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; + } } } } diff --git a/themes/viva/_extensions.scss b/themes/viva/_extensions.scss index 1cc93ae..bd9c2d2 100644 --- a/themes/viva/_extensions.scss +++ b/themes/viva/_extensions.scss @@ -1,195 +1,197 @@ /* Customizations to the designer theme should be defined here */ -.p-button { - .p-button-label { - font-weight: 600; - } -} - -.p-buttonset, -.p-togglebutton { - .p-button-label { - font-weight: 400; - } -} - -.p-carousel { - .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: $primaryColor; - } -} - -.p-galleria { - .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: $primaryColor; +@layer primevue { + .p-button { + .p-button-label { + font-weight: 600; + } } -} - -.p-panel { - border: $panelContentBorder; - border-radius: $borderRadius; - - .p-panel-header { - border: 0 none; + + .p-buttonset, + .p-togglebutton { + .p-button-label { + font-weight: 400; + } } - - .p-panel-content { - border: 0 none; + + .p-carousel { + .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: $primaryColor; + } } -} - -.p-fieldset { - .p-fieldset-legend { - border-color: transparent; + + .p-galleria { + .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: $primaryColor; + } } -} - -.p-accordion { - .p-accordion-toggle-icon { - order: 10; - margin-left: auto; - - &.pi-chevron-right::before { - content: "\e90d"; + + .p-panel { + border: $panelContentBorder; + border-radius: $borderRadius; + + .p-panel-header { + border: 0 none; } - - &.pi-chevron-down::before { - content: "\e90f"; + + .p-panel-content { + border: 0 none; } } - - .p-accordion-header { - &.p-highlight { - .p-accordion-header-link { - padding-bottom: calc(1rem + 2px); - border-bottom: 0 none; + + .p-fieldset { + .p-fieldset-legend { + border-color: transparent; + } + } + + .p-accordion { + .p-accordion-toggle-icon { + order: 10; + margin-left: auto; + + &.pi-chevron-right::before { + content: "\e90d"; + } + + &.pi-chevron-down::before { + content: "\e90f"; } } - - &:not(.p-disabled).p-highlight { - &:hover { + + .p-accordion-header { + &.p-highlight { .p-accordion-header-link { + padding-bottom: calc(1rem + 2px); border-bottom: 0 none; } } + + &:not(.p-disabled).p-highlight { + &:hover { + .p-accordion-header-link { + border-bottom: 0 none; + } + } + } } } -} - -.p-inline-message { - &.p-inline-message-info { - border-color: $infoMessageBg; - } - - &.p-inline-message-success { - border-color: $successMessageBg; - } - - &.p-inline-message-warn { - border-color: $warningMessageBg; - } - - &.p-inline-message-error { - border-color: $errorMessageBg; - } -} - -.p-inputtext { - &:enabled:focus { - box-shadow: none; - } -} - -.p-dropdown { - &:not(.p-disabled).p-focus { - box-shadow: none; - } -} - -.p-multiselect { - &:not(.p-disabled).p-focus { - box-shadow: none; + + .p-inline-message { + &.p-inline-message-info { + border-color: $infoMessageBg; + } + + &.p-inline-message-success { + border-color: $successMessageBg; + } + + &.p-inline-message-warn { + border-color: $warningMessageBg; + } + + &.p-inline-message-error { + border-color: $errorMessageBg; + } } -} - -.p-cascadeselect { - &:not(.p-disabled).p-focus { - box-shadow: none; + + .p-inputtext { + &:enabled:focus { + box-shadow: none; + } } -} - -.p-autocomplete { - &.p-autocomplete-multiple { + + .p-dropdown { &:not(.p-disabled).p-focus { box-shadow: none; } } -} - -.p-chips { - .p-chips-multiple-container { + + .p-multiselect { &:not(.p-disabled).p-focus { box-shadow: none; } } -} - -.p-orderlist { - .p-orderlist-list { - border-top: 0 none; + + .p-cascadeselect { + &:not(.p-disabled).p-focus { + box-shadow: none; + } } -} - -.p-picklist { - .p-picklist-list { - border-top: 0 none; + + .p-autocomplete { + &.p-autocomplete-multiple { + &:not(.p-disabled).p-focus { + box-shadow: none; + } + } } -} - -.p-panelmenu { - .p-submenu-icon { - &.pi-chevron-right, - &.pi-chevron-down { - order: 10; - margin-left: auto; + + .p-chips { + .p-chips-multiple-container { + &:not(.p-disabled).p-focus { + box-shadow: none; + } } - - &.pi-chevron-right::before { - content: "\e90d"; + } + + .p-orderlist { + .p-orderlist-list { + border-top: 0 none; } - - &.pi-chevron-down::before { - content: "\e90f"; + } + + .p-picklist { + .p-picklist-list { + border-top: 0 none; } } - - .p-panelmenu-header { - &.p-highlight { - > a { - padding-bottom: calc(1rem + 2px); - border-bottom: 0 none; + + .p-panelmenu { + .p-submenu-icon { + &.pi-chevron-right, + &.pi-chevron-down { + order: 10; + margin-left: auto; + } + + &.pi-chevron-right::before { + content: "\e90d"; + } + + &.pi-chevron-down::before { + content: "\e90f"; } } - - - &:not(.p-highlight):not(.p-disabled) { - > a:hover { - padding-bottom: calc(1rem + 2px); - border-bottom: 0 none; + + .p-panelmenu-header { + &.p-highlight { + > a { + padding-bottom: calc(1rem + 2px); + border-bottom: 0 none; + } + } + + + &:not(.p-highlight):not(.p-disabled) { + > a:hover { + padding-bottom: calc(1rem + 2px); + border-bottom: 0 none; + } } } } -} - -.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; + + .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; + } } } }