From fcbe5c0c55d165a61d57b3f119cd210974795a3b Mon Sep 17 00:00:00 2001 From: Elmar Kresse Date: Sat, 7 Sep 2024 10:09:30 +0200 Subject: [PATCH] fix:#53 linted formatted frontend files --- .../public/primevue-sass-theme/package.json | 2 +- .../theme-base/_colors.scss | 29 +- .../theme-base/_common.scss | 199 +- .../theme-base/_components.scss | 190 +- .../theme-base/_mixins.scss | 404 +- .../theme-base/components/button/_button.scss | 1127 +++--- .../components/button/_speeddial.scss | 190 +- .../components/button/_splitbutton.scss | 49 +- .../theme-base/components/data/_carousel.scss | 118 +- .../components/data/_datatable.scss | 828 ++-- .../theme-base/components/data/_dataview.scss | 64 +- .../theme-base/components/data/_filter.scss | 229 +- .../components/data/_orderlist.scss | 190 +- .../components/data/_organizationchart.scss | 142 +- .../components/data/_paginator.scss | 196 +- .../theme-base/components/data/_picklist.scss | 186 +- .../theme-base/components/data/_timeline.scss | 145 +- .../theme-base/components/data/_tree.scss | 224 +- .../components/data/_treetable.scss | 576 +-- .../components/file/_fileupload.scss | 160 +- .../components/input/_autocomplete.scss | 274 +- .../components/input/_calendar.scss | 554 +-- .../components/input/_cascadeselect.scss | 254 +- .../components/input/_checkbox.scss | 228 +- .../theme-base/components/input/_chips.scss | 132 +- .../components/input/_colorpicker.scss | 36 +- .../components/input/_dropdown.scss | 348 +- .../theme-base/components/input/_editor.scss | 198 +- .../components/input/_floatlabel.scss | 38 +- .../components/input/_iconfield.scss | 10 +- .../components/input/_inputgroup.scss | 106 +- .../components/input/_inputicon.scss | 14 +- .../components/input/_inputnumber.scss | 118 +- .../components/input/_inputotp.scss | 10 +- .../components/input/_inputswitch.scss | 140 +- .../components/input/_inputtext.scss | 126 +- .../theme-base/components/input/_knob.scss | 22 +- .../theme-base/components/input/_listbox.scss | 196 +- .../components/input/_multiselect.scss | 380 +- .../components/input/_password.scss | 62 +- .../components/input/_radiobutton.scss | 240 +- .../theme-base/components/input/_rating.scss | 114 +- .../components/input/_selectbutton.scss | 86 +- .../theme-base/components/input/_slider.scss | 110 +- .../components/input/_textarea.scss | 8 +- .../components/input/_togglebutton.scss | 152 +- .../components/input/_treeselect.scss | 195 +- .../components/input/_tristatecheckbox.scss | 54 +- .../components/menu/_breadcrumb.scss | 102 +- .../components/menu/_contextmenu.scss | 94 +- .../theme-base/components/menu/_dock.scss | 236 +- .../theme-base/components/menu/_megamenu.scss | 379 +- .../theme-base/components/menu/_menu.scss | 74 +- .../theme-base/components/menu/_menubar.scss | 310 +- .../components/menu/_panelmenu.scss | 316 +- .../theme-base/components/menu/_steps.scss | 152 +- .../theme-base/components/menu/_tabmenu.scss | 124 +- .../components/menu/_tieredmenu.scss | 118 +- .../components/messages/_inlinemessage.scss | 178 +- .../components/messages/_message.scss | 283 +- .../components/messages/_toast.scss | 304 +- .../theme-base/components/misc/_avatar.scss | 70 +- .../theme-base/components/misc/_badge.scss | 140 +- .../theme-base/components/misc/_blockui.scss | 10 +- .../theme-base/components/misc/_chip.scss | 82 +- .../theme-base/components/misc/_inplace.scss | 39 +- .../components/misc/_metergroup.scss | 148 +- .../components/misc/_progressbar.scss | 192 +- .../components/misc/_progressspinner.scss | 108 +- .../theme-base/components/misc/_ripple.scss | 30 +- .../components/misc/_scrolltop.scss | 60 +- .../theme-base/components/misc/_skeleton.scss | 53 +- .../theme-base/components/misc/_tag.scss | 102 +- .../theme-base/components/misc/_terminal.scss | 40 +- .../components/multimedia/_galleria.scss | 528 +-- .../components/multimedia/_image.scss | 144 +- .../components/overlay/_confirmpopup.scss | 167 +- .../components/overlay/_dialog.scss | 176 +- .../components/overlay/_overlaypanel.scss | 159 +- .../components/overlay/_sidebar.scss | 160 +- .../components/overlay/_tooltip.scss | 92 +- .../components/panel/_accordion.scss | 240 +- .../theme-base/components/panel/_card.scss | 46 +- .../theme-base/components/panel/_divider.scss | 142 +- .../components/panel/_fieldset.scss | 98 +- .../theme-base/components/panel/_panel.scss | 100 +- .../components/panel/_scrollpanel.scss | 74 +- .../components/panel/_splitter.scss | 90 +- .../theme-base/components/panel/_stepper.scss | 304 +- .../theme-base/components/panel/_tabview.scss | 186 +- .../theme-base/components/panel/_toolbar.scss | 32 +- .../themes/lara/lara-dark/_extensions.scss | 306 +- .../themes/lara/lara-dark/_variables.scss | 170 +- .../themes/lara/lara-dark/yellow/theme.scss | 164 +- .../themes/lara/lara-light/_extensions.scss | 260 +- .../themes/lara/lara-light/_variables.scss | 1505 +++---- .../themes/lara/lara-light/blue/theme.scss | 166 +- .../themes/lara/lara-light/green/theme.scss | 178 +- .../public/themes/lara-dark-blue/theme.css | 3496 +++++++++++----- .../themes/lara-dark-blue/theme.css.map | 2 +- .../public/themes/lara-light-blue/theme.css | 3527 ++++++++++++----- frontend/src/App.vue | 75 +- frontend/src/api/fetchEvents.ts | 4 +- .../src/components/AdditionalModuleTable.vue | 3 +- frontend/src/components/DarkModeSwitcher.vue | 4 +- frontend/src/components/MenuBar.vue | 8 +- frontend/src/components/RoomOccupation.vue | 8 +- frontend/src/main.ts | 12 +- frontend/src/router/index.ts | 43 +- frontend/src/view/CalendarLink.vue | 20 +- frontend/src/view/DynamicPage.vue | 14 +- frontend/src/view/FaqView.vue | 36 +- .../src/view/create/AdditionalModules.vue | 4 +- frontend/src/view/rooms/FreeRooms.vue | 8 +- frontend/vite.config.ts | 53 +- 115 files changed, 14849 insertions(+), 11152 deletions(-) diff --git a/frontend/public/primevue-sass-theme/package.json b/frontend/public/primevue-sass-theme/package.json index f99ac2b..8b6e5ce 100644 --- a/frontend/public/primevue-sass-theme/package.json +++ b/frontend/public/primevue-sass-theme/package.json @@ -26,4 +26,4 @@ "bugs": { "url": "https://github.com/primefaces/primevue-sass-theme/issues" } -} \ No newline at end of file +} diff --git a/frontend/public/primevue-sass-theme/theme-base/_colors.scss b/frontend/public/primevue-sass-theme/theme-base/_colors.scss index de70590..f983702 100644 --- a/frontend/public/primevue-sass-theme/theme-base/_colors.scss +++ b/frontend/public/primevue-sass-theme/theme-base/_colors.scss @@ -1,18 +1,17 @@ :root { - @if variable-exists(colors) { - @each $name, $color in $colors { - @for $i from 0 through 5 { - @if ($i == 0) { - --#{$name}-50:#{tint($color, (5 - $i) * 19%)}; - } - @else { - --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)}; - } - } - - @for $i from 1 through 4 { - --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)}; - } + @if variable-exists(colors) { + @each $name, $color in $colors { + @for $i from 0 through 5 { + @if ($i == 0) { + --#{$name}-50: #{tint($color, (5 - $i) * 19%)}; + } @else { + --#{$name}-#{$i * 100}: #{tint($color, (5 - $i) * 19%)}; } + } + + @for $i from 1 through 4 { + --#{$name}-#{($i + 5) * 100}: #{shade($color, $i * 15%)}; + } } -} \ No newline at end of file + } +} diff --git a/frontend/public/primevue-sass-theme/theme-base/_common.scss b/frontend/public/primevue-sass-theme/theme-base/_common.scss index c33bdc2..9dcbc31 100644 --- a/frontend/public/primevue-sass-theme/theme-base/_common.scss +++ b/frontend/public/primevue-sass-theme/theme-base/_common.scss @@ -1,198 +1,205 @@ // core -.p-component, .p-component * { - box-sizing: border-box; +.p-component, +.p-component * { + box-sizing: border-box; } .p-hidden-space { - visibility: hidden; + visibility: hidden; } .p-reset { - margin: 0; - padding: 0; - border: 0; - outline: 0; - text-decoration: none; - font-size: 100%; - list-style: none; + margin: 0; + padding: 0; + border: 0; + outline: 0; + text-decoration: none; + font-size: 100%; + list-style: none; } -.p-disabled, .p-disabled * { - cursor: default; - pointer-events: none; - user-select: none; +.p-disabled, +.p-disabled * { + cursor: default; + pointer-events: none; + user-select: none; } .p-component-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; } .p-unselectable-text { - user-select: none; + user-select: none; } .p-sr-only { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - word-wrap: normal; + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; } .p-link { - text-align: left; - background-color: transparent; - margin: 0; - padding: 0; - border: none; - cursor: pointer; - user-select: none; + text-align: left; + background-color: transparent; + margin: 0; + padding: 0; + border: none; + cursor: pointer; + user-select: none; } .p-link:disabled { - cursor: default; + cursor: default; } /* Non vue overlay animations */ .p-connected-overlay { - opacity: 0; - transform: scaleY(0.8); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + opacity: 0; + transform: scaleY(0.8); + transition: + transform 0.12s cubic-bezier(0, 0, 0.2, 1), + opacity 0.12s cubic-bezier(0, 0, 0.2, 1); } .p-connected-overlay-visible { - opacity: 1; - transform: scaleY(1); + opacity: 1; + transform: scaleY(1); } .p-connected-overlay-hidden { - opacity: 0; - transform: scaleY(1); - transition: opacity .1s linear; + opacity: 0; + transform: scaleY(1); + transition: opacity 0.1s linear; } /* Vue based overlay animations */ .p-connected-overlay-enter-from { - opacity: 0; - transform: scaleY(0.8); + opacity: 0; + transform: scaleY(0.8); } .p-connected-overlay-leave-to { - opacity: 0; + opacity: 0; } .p-connected-overlay-enter-active { - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + transition: + transform 0.12s cubic-bezier(0, 0, 0.2, 1), + opacity 0.12s cubic-bezier(0, 0, 0.2, 1); } .p-connected-overlay-leave-active { - transition: opacity .1s linear; + transition: opacity 0.1s linear; } /* Toggleable Content */ .p-toggleable-content-enter-from, .p-toggleable-content-leave-to { - max-height: 0; + max-height: 0; } .p-toggleable-content-enter-to, .p-toggleable-content-leave-from { - max-height: 1000px; + max-height: 1000px; } .p-toggleable-content-leave-active { - overflow: hidden; - transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); } .p-toggleable-content-enter-active { - overflow: hidden; - transition: max-height 1s ease-in-out; + overflow: hidden; + transition: max-height 1s ease-in-out; } // theme * { - box-sizing: border-box; + box-sizing: border-box; } .p-component { - font-family: var(--font-family); - font-feature-settings: var(--font-feature-settings, normal); - font-size: $fontSize; - font-weight: $fontWeight; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: $fontSize; + font-weight: $fontWeight; } .p-component-overlay { - background-color: $maskBg; - transition-duration: $transitionDuration; + background-color: $maskBg; + transition-duration: $transitionDuration; } -.p-disabled, .p-component:disabled { - opacity: $disabledOpacity; +.p-disabled, +.p-component:disabled { + opacity: $disabledOpacity; } .p-error { - color: $errorColor; + color: $errorColor; } .p-text-secondary { - color: $textSecondaryColor; + color: $textSecondaryColor; } .pi { - font-size: $primeIconFontSize; + font-size: $primeIconFontSize; } .p-icon { - width: $primeIconFontSize; - height: $primeIconFontSize; + width: $primeIconFontSize; + height: $primeIconFontSize; } .p-link { - font-family: var(--font-family); - font-feature-settings: var(--font-feature-settings, normal); - font-size: $fontSize; - border-radius: $borderRadius; - outline-color: transparent; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: $fontSize; + border-radius: $borderRadius; + outline-color: transparent; - &:focus-visible { - @include focused(); - } + &:focus-visible { + @include focused(); + } } .p-component-overlay-enter { - animation: p-component-overlay-enter-animation 150ms forwards; + animation: p-component-overlay-enter-animation 150ms forwards; } .p-component-overlay-leave { - animation: p-component-overlay-leave-animation 150ms forwards; + animation: p-component-overlay-leave-animation 150ms forwards; } .p-component-overlay { - @keyframes p-component-overlay-enter-animation { - from { - background-color: transparent; - } - to { - background-color: var(--maskbg); - } + @keyframes p-component-overlay-enter-animation { + from { + background-color: transparent; } - - @keyframes p-component-overlay-leave-animation { - from { - background-color: var(--maskbg); - } - to { - background-color: transparent; - } + to { + background-color: var(--maskbg); } + } + + @keyframes p-component-overlay-leave-animation { + from { + background-color: var(--maskbg); + } + to { + background-color: transparent; + } + } } diff --git a/frontend/public/primevue-sass-theme/theme-base/_components.scss b/frontend/public/primevue-sass-theme/theme-base/_components.scss index 256d151..db7c010 100644 --- a/frontend/public/primevue-sass-theme/theme-base/_components.scss +++ b/frontend/public/primevue-sass-theme/theme-base/_components.scss @@ -4,109 +4,109 @@ @import "./components/input/_editor"; @layer primevue { - @import "_common"; + @import "_common"; - //Input - @import "./components/input/_autocomplete"; - @import "./components/input/_calendar"; - @import "./components/input/_cascadeselect"; - @import "./components/input/_checkbox"; - @import "./components/input/_chips"; - @import "./components/input/_colorpicker"; - @import "./components/input/_dropdown"; - @import "./components/input/_floatlabel"; - @import "./components/input/_iconfield"; - @import "./components/input/_inputotp"; - @import "./components/input/_inputgroup"; - @import "./components/input/_inputicon"; - @import "./components/input/_inputnumber"; - @import "./components/input/_inputswitch"; - @import "./components/input/_inputtext"; - @import "./components/input/_knob"; - @import "./components/input/_listbox"; - @import "./components/input/_multiselect"; - @import "./components/input/_password"; - @import "./components/input/_radiobutton"; - @import "./components/input/_rating"; - @import "./components/input/_selectbutton"; - @import "./components/input/_slider"; - @import "./components/input/_textarea"; - @import "./components/input/_treeselect"; - @import "./components/input/_togglebutton"; + //Input + @import "./components/input/_autocomplete"; + @import "./components/input/_calendar"; + @import "./components/input/_cascadeselect"; + @import "./components/input/_checkbox"; + @import "./components/input/_chips"; + @import "./components/input/_colorpicker"; + @import "./components/input/_dropdown"; + @import "./components/input/_floatlabel"; + @import "./components/input/_iconfield"; + @import "./components/input/_inputotp"; + @import "./components/input/_inputgroup"; + @import "./components/input/_inputicon"; + @import "./components/input/_inputnumber"; + @import "./components/input/_inputswitch"; + @import "./components/input/_inputtext"; + @import "./components/input/_knob"; + @import "./components/input/_listbox"; + @import "./components/input/_multiselect"; + @import "./components/input/_password"; + @import "./components/input/_radiobutton"; + @import "./components/input/_rating"; + @import "./components/input/_selectbutton"; + @import "./components/input/_slider"; + @import "./components/input/_textarea"; + @import "./components/input/_treeselect"; + @import "./components/input/_togglebutton"; - //Button - @import "./components/button/_button"; - @import "./components/button/_speeddial"; - @import "./components/button/_splitbutton"; + //Button + @import "./components/button/_button"; + @import "./components/button/_speeddial"; + @import "./components/button/_splitbutton"; - //Data - @import "./components/data/_carousel"; - @import "./components/data/_datatable"; - @import "./components/data/_dataview"; - @import "./components/data/_filter"; - @import "./components/data/_orderlist"; - @import "./components/data/_organizationchart"; - @import "./components/data/_paginator"; - @import "./components/data/_picklist"; - @import "./components/data/_timeline"; - @import "./components/data/_tree"; - @import "./components/data/_treetable"; + //Data + @import "./components/data/_carousel"; + @import "./components/data/_datatable"; + @import "./components/data/_dataview"; + @import "./components/data/_filter"; + @import "./components/data/_orderlist"; + @import "./components/data/_organizationchart"; + @import "./components/data/_paginator"; + @import "./components/data/_picklist"; + @import "./components/data/_timeline"; + @import "./components/data/_tree"; + @import "./components/data/_treetable"; - //Panel - @import "./components/panel/_accordion"; - @import "./components/panel/_card"; - @import "./components/panel/_fieldset"; - @import "./components/panel/_divider"; - @import "./components/panel/_panel"; - @import "./components/panel/_scrollpanel"; - @import "./components/panel/_splitter"; - @import "./components/panel/_stepper"; - @import "./components/panel/_tabview"; - @import "./components/panel/_toolbar"; + //Panel + @import "./components/panel/_accordion"; + @import "./components/panel/_card"; + @import "./components/panel/_fieldset"; + @import "./components/panel/_divider"; + @import "./components/panel/_panel"; + @import "./components/panel/_scrollpanel"; + @import "./components/panel/_splitter"; + @import "./components/panel/_stepper"; + @import "./components/panel/_tabview"; + @import "./components/panel/_toolbar"; - //Overlay - @import "./components/overlay/_confirmpopup"; - @import "./components/overlay/_dialog"; - @import "./components/overlay/_overlaypanel"; - @import "./components/overlay/_sidebar"; - @import "./components/overlay/_tooltip"; + //Overlay + @import "./components/overlay/_confirmpopup"; + @import "./components/overlay/_dialog"; + @import "./components/overlay/_overlaypanel"; + @import "./components/overlay/_sidebar"; + @import "./components/overlay/_tooltip"; - //File - @import "./components/file/_fileupload"; + //File + @import "./components/file/_fileupload"; - //Menu - @import "./components/menu/_breadcrumb"; - @import "./components/menu/_contextmenu"; - @import "./components/menu/_dock"; - @import "./components/menu/_megamenu"; - @import "./components/menu/_menu"; - @import "./components/menu/_menubar"; - @import "./components/menu/_panelmenu"; - @import "./components/menu/_steps"; - @import "./components/menu/_tabmenu"; - @import "./components/menu/_tieredmenu"; + //Menu + @import "./components/menu/_breadcrumb"; + @import "./components/menu/_contextmenu"; + @import "./components/menu/_dock"; + @import "./components/menu/_megamenu"; + @import "./components/menu/_menu"; + @import "./components/menu/_menubar"; + @import "./components/menu/_panelmenu"; + @import "./components/menu/_steps"; + @import "./components/menu/_tabmenu"; + @import "./components/menu/_tieredmenu"; - //Messages - @import "./components/messages/_inlinemessage"; - @import "./components/messages/_message"; - @import "components/messages/toast"; + //Messages + @import "./components/messages/_inlinemessage"; + @import "./components/messages/_message"; + @import "components/messages/toast"; - //MultiMedia - @import "./components/multimedia/_galleria"; - @import "./components/multimedia/_image"; + //MultiMedia + @import "./components/multimedia/_galleria"; + @import "./components/multimedia/_image"; - //Misc - @import "./components/misc/_avatar"; - @import "./components/misc/_badge"; - @import "./components/misc/_blockui"; - @import "./components/misc/_chip"; - @import "./components/misc/_inplace"; - @import "./components/misc/_metergroup"; - @import "./components/misc/_progressbar"; - @import "./components/misc/_progressspinner"; - @import "./components/misc/_ripple"; - @import "./components/misc/_scrolltop"; - @import "./components/misc/_skeleton"; - @import "./components/misc/_tag"; - @import "./components/misc/_terminal"; + //Misc + @import "./components/misc/_avatar"; + @import "./components/misc/_badge"; + @import "./components/misc/_blockui"; + @import "./components/misc/_chip"; + @import "./components/misc/_inplace"; + @import "./components/misc/_metergroup"; + @import "./components/misc/_progressbar"; + @import "./components/misc/_progressspinner"; + @import "./components/misc/_ripple"; + @import "./components/misc/_scrolltop"; + @import "./components/misc/_skeleton"; + @import "./components/misc/_tag"; + @import "./components/misc/_terminal"; } diff --git a/frontend/public/primevue-sass-theme/theme-base/_mixins.scss b/frontend/public/primevue-sass-theme/theme-base/_mixins.scss index 0a63f64..19439bd 100644 --- a/frontend/public/primevue-sass-theme/theme-base/_mixins.scss +++ b/frontend/public/primevue-sass-theme/theme-base/_mixins.scss @@ -1,278 +1,282 @@ @mixin icon-override($icon) { - &:before { - content: $icon; - } + &:before { + content: $icon; + } } @mixin focused() { - outline: $focusOutline; - outline-offset: $focusOutlineOffset; - box-shadow: $focusShadow; + outline: $focusOutline; + outline-offset: $focusOutlineOffset; + box-shadow: $focusShadow; } @mixin focused-inset() { - outline: $focusOutline; - outline-offset: -1 * $focusOutlineOffset; - box-shadow: inset $focusShadow; + outline: $focusOutline; + outline-offset: -1 * $focusOutlineOffset; + box-shadow: inset $focusShadow; } @mixin focused-input() { - outline: $focusOutline; - outline-offset: $inputFocusOutlineOffset; - box-shadow: $focusShadow; - border-color: $inputFocusBorderColor; + outline: $focusOutline; + outline-offset: $inputFocusOutlineOffset; + box-shadow: $focusShadow; + border-color: $inputFocusBorderColor; } @mixin focused-listitem() { - outline: $focusOutline; - outline-offset: $focusOutlineOffset; - box-shadow: $inputListItemFocusShadow; + outline: $focusOutline; + outline-offset: $focusOutlineOffset; + box-shadow: $inputListItemFocusShadow; } @mixin invalid-input() { - border-color: $inputErrorBorderColor; + border-color: $inputErrorBorderColor; } @mixin menuitem { - margin: $inputListItemMargin; + margin: $inputListItemMargin; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; + } - &:last-child { - margin-bottom: 0; - } - - > .p-menuitem-content { + &:last-child { + margin-bottom: 0; + } + + > .p-menuitem-content { + color: $menuitemTextColor; + transition: $listItemTransition; + border-radius: $menuitemBorderRadius; + + .p-menuitem-link { + color: $menuitemTextColor; + padding: $menuitemPadding; + user-select: none; + + .p-menuitem-text { color: $menuitemTextColor; - transition: $listItemTransition; - border-radius: $menuitemBorderRadius; + } + + .p-menuitem-icon { + color: $menuitemIconColor; + margin-right: $inlineSpacing; + } + + .p-submenu-icon { + color: $menuitemIconColor; + } + } + } + + &.p-highlight { + > .p-menuitem-content { + color: $menuitemTextActiveColor; + background: $menuitemActiveBg; + + .p-menuitem-link { + .p-menuitem-text { + color: $menuitemTextActiveColor; + } + + .p-menuitem-icon, + .p-submenu-icon { + color: $menuitemIconActiveColor; + } + } + } + + &.p-focus { + > .p-menuitem-content { + background: $menuitemActiveFocusBg; + } + } + } + + &:not(.p-highlight):not(.p-disabled) { + &.p-focus { + > .p-menuitem-content { + color: $menuitemTextHoverColor; + background: $menuitemHoverBg; .p-menuitem-link { - color: $menuitemTextColor; - padding: $menuitemPadding; - user-select: none; + .p-menuitem-text { + color: $menuitemTextHoverColor; + } + .p-menuitem-icon, + .p-submenu-icon { + color: $menuitemTextHoverColor; + } + } + + &:hover { + color: $menuitemTextHoverColor; + background: $menuitemHoverBg; + + .p-menuitem-link { .p-menuitem-text { - color: $menuitemTextColor; + color: $menuitemTextHoverColor; } - - .p-menuitem-icon { - color: $menuitemIconColor; - margin-right: $inlineSpacing; - } - + + .p-menuitem-icon, .p-submenu-icon { - color: $menuitemIconColor; + color: $menuitemIconHoverColor; } + } } + } } - &.p-highlight { - > .p-menuitem-content { - color: $menuitemTextActiveColor; - background: $menuitemActiveBg; + > .p-menuitem-content { + &:hover { + color: $menuitemTextHoverColor; + background: $menuitemHoverBg; - .p-menuitem-link { - .p-menuitem-text { - color: $menuitemTextActiveColor; - } + .p-menuitem-link { + .p-menuitem-text { + color: $menuitemTextHoverColor; + } - .p-menuitem-icon, .p-submenu-icon { - color: $menuitemIconActiveColor; - } - } - } - - &.p-focus { - > .p-menuitem-content { - background: $menuitemActiveFocusBg; - } - } - } - - &:not(.p-highlight):not(.p-disabled) { - &.p-focus { - > .p-menuitem-content { - color: $menuitemTextHoverColor; - background: $menuitemHoverBg; - - .p-menuitem-link { - .p-menuitem-text { - color: $menuitemTextHoverColor; - } - - .p-menuitem-icon, .p-submenu-icon { - color: $menuitemTextHoverColor; - } - } - - &:hover { - color: $menuitemTextHoverColor; - background: $menuitemHoverBg; - - .p-menuitem-link { - .p-menuitem-text { - color: $menuitemTextHoverColor; - } - - .p-menuitem-icon, .p-submenu-icon { - color: $menuitemIconHoverColor; - } - } - } - } - } - - > .p-menuitem-content { - &:hover { - color: $menuitemTextHoverColor; - background: $menuitemHoverBg; - - .p-menuitem-link { - .p-menuitem-text { - color: $menuitemTextHoverColor; - } - - .p-menuitem-icon, .p-submenu-icon { - color: $menuitemIconHoverColor; - } - } - } + .p-menuitem-icon, + .p-submenu-icon { + color: $menuitemIconHoverColor; + } } + } } + } } @mixin horizontal-rootmenuitem { - > .p-menuitem-content { + > .p-menuitem-content { + color: $horizontalMenuRootMenuitemTextColor; + transition: $listItemTransition; + border-radius: $horizontalMenuRootMenuitemBorderRadius; + + .p-menuitem-link { + padding: $horizontalMenuRootMenuitemPadding; + user-select: none; + + .p-menuitem-text { color: $horizontalMenuRootMenuitemTextColor; - transition: $listItemTransition; - border-radius: $horizontalMenuRootMenuitemBorderRadius; + } + + .p-menuitem-icon { + color: $horizontalMenuRootMenuitemIconColor; + margin-right: $inlineSpacing; + } + + .p-submenu-icon { + color: $horizontalMenuRootMenuitemIconColor; + margin-left: $inlineSpacing; + } + } + } + + &:not(.p-highlight):not(.p-disabled) { + > .p-menuitem-content { + &:hover { + color: $horizontalMenuRootMenuitemTextHoverColor; + background: $horizontalMenuRootMenuitemHoverBg; .p-menuitem-link { - padding: $horizontalMenuRootMenuitemPadding; - user-select: none; + .p-menuitem-text { + color: $horizontalMenuRootMenuitemTextHoverColor; + } - .p-menuitem-text { - color: $horizontalMenuRootMenuitemTextColor; - } - - .p-menuitem-icon { - color: $horizontalMenuRootMenuitemIconColor; - margin-right: $inlineSpacing; - } - - .p-submenu-icon { - color: $horizontalMenuRootMenuitemIconColor; - margin-left: $inlineSpacing; - } - } - } - - &:not(.p-highlight):not(.p-disabled) { - > .p-menuitem-content { - &:hover { - color: $horizontalMenuRootMenuitemTextHoverColor; - background: $horizontalMenuRootMenuitemHoverBg; - - .p-menuitem-link { - .p-menuitem-text { - color: $horizontalMenuRootMenuitemTextHoverColor; - } - - .p-menuitem-icon, .p-submenu-icon { - color: $horizontalMenuRootMenuitemIconHoverColor; - } - } - } + .p-menuitem-icon, + .p-submenu-icon { + color: $horizontalMenuRootMenuitemIconHoverColor; + } } + } } + } } @mixin placeholder { - ::-webkit-input-placeholder { - @content - } - :-moz-placeholder { - @content - } - ::-moz-placeholder { - @content - } - :-ms-input-placeholder { - @content - } + ::-webkit-input-placeholder { + @content; + } + :-moz-placeholder { + @content; + } + ::-moz-placeholder { + @content; + } + :-ms-input-placeholder { + @content; + } } @mixin scaledPadding($val, $scale) { - padding: nth($val, 1) * $scale nth($val, 2) * $scale; + padding: nth($val, 1) * $scale nth($val, 2) * $scale; } @mixin scaledFontSize($val, $scale) { - font-size: $val * $scale; + font-size: $val * $scale; } @mixin nested-submenu-indents($val, $index, $length) { - .p-submenu-list { - .p-menuitem { - .p-menuitem-content { - .p-menuitem-link { - padding-left: $val * ($index + 1); - } - - } - @if $index < $length { - @include nested-submenu-indents($val, $index + 2, $length); - } + .p-submenu-list { + .p-menuitem { + .p-menuitem-content { + .p-menuitem-link { + padding-left: $val * ($index + 1); } + } + @if $index < $length { + @include nested-submenu-indents($val, $index + 2, $length); + } } + } } @mixin action-icon($enabled: true) { - width: $actionIconWidth; - height: $actionIconHeight; - color: $actionIconColor; - border: $actionIconBorder; - background: $actionIconBg; - border-radius: $actionIconBorderRadius; - transition: $actionIconTransition; - outline-color: transparent; + width: $actionIconWidth; + height: $actionIconHeight; + color: $actionIconColor; + border: $actionIconBorder; + background: $actionIconBg; + border-radius: $actionIconBorderRadius; + transition: $actionIconTransition; + outline-color: transparent; - @if $enabled { - &:enabled:hover { - @include action-icon-hover(); - } - } @else { - &:hover { - @include action-icon-hover(); - } + @if $enabled { + &:enabled:hover { + @include action-icon-hover(); } + } @else { + &:hover { + @include action-icon-hover(); + } + } - &:focus-visible { - @include focused(); - } + &:focus-visible { + @include focused(); + } } @mixin action-icon-hover() { - color: $actionIconHoverColor; - border-color: $actionIconHoverBorderColor; - background: $actionIconHoverBg; + color: $actionIconHoverColor; + border-color: $actionIconHoverBorderColor; + background: $actionIconHoverBg; } @mixin button-states { - //