HTWK/htwkalender-pwa
1
0
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git synced 2025-08-07 04:09:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:#47 changed success button focus

Browse Source
This commit is contained in:
Elmar Kresse
2024-04-04 22:16:21 +02:00
parent 51eb885c05
commit 84fe949ae6
4 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/primevue-sass-theme/themes/lara/lara-light/_extensions.scss
View File

@@ -62,7 +62,7 @@
} }
&.p-button-success:enabled:focus { &.p-button-success:enabled:focus {
@include focused-ring(scale-color($successButtonBg, $lightness: 50%)); @include focused-ring($successButtonBg);
} }
&.p-button-info:enabled:focus { &.p-button-info:enabled:focus {

22
frontend/public/primevue-sass-theme/themes/lara/lara-light/_variables.scss
View File

@@ -182,25 +182,25 @@ $secondaryButtonFocusShadow:0 0 0 0.2rem #E2E8F0 !default;
$infoButtonBg: map-get($colors, "htwk-blau") !default; $infoButtonBg: map-get($colors, "htwk-blau") !default;
$infoButtonTextColor:#ffffff !default; $infoButtonTextColor:#ffffff !default;
$infoButtonBorder:1px solid map-get($colors, "primary") !default; $infoButtonBorder:1px solid map-get($colors, "htwk-blau") !default;
$infoButtonHoverBg: #0257c7 !default; $infoButtonHoverBg: #0257c7 !default;
$infoButtonTextHoverColor:$infoButtonTextColor !default; $infoButtonTextHoverColor:$infoButtonTextColor !default;
$infoButtonHoverBorderColor:#rgba(map-get($colors, "htwk-blau"), .8) !default; $infoButtonHoverBorderColor: map-get($colors, "htwk-blau") !default;
$infoButtonActiveBg:rgba(map-get($colors, "primary"), .8) !default; $infoButtonActiveBg:rgba(map-get($colors, "htwk-blau"), .8) !default;
$infoButtonTextActiveColor:$infoButtonTextColor !default; $infoButtonTextActiveColor:$infoButtonTextColor !default;
$infoButtonActiveBorderColor:rgba(map-get($colors, "primary"), .9) !default; $infoButtonActiveBorderColor:rgba(map-get($colors, "htwk-blau"), .9) !default;
$infoButtonFocusShadow:0 0 0 0.2rem rgba(map-get($colors, "primary"), .7) !default; $infoButtonFocusShadow:0 0 0 0.2rem rgba(map-get($colors, "htwk-blau"), .7) !default;
$successButtonBg:#22C55E !default; $successButtonBg: map-get($colors, "htwk-gruen") !default;
$successButtonTextColor:#ffffff !default; $successButtonTextColor:#ffffff !default;
$successButtonBorder:1px solid #22C55E !default; $successButtonBorder:1px solid map-get($colors, "htwk-gruen") !default;
$successButtonHoverBg:#16A34A !default; $successButtonHoverBg: map-get($colors, "htwk-gruen") !default;
$successButtonTextHoverColor:$successButtonTextColor !default; $successButtonTextHoverColor:$successButtonTextColor !default;
$successButtonHoverBorderColor:#16A34A !default; $successButtonHoverBorderColor: map-get($colors, "htwk-gruen") !default;
$successButtonActiveBg:#15803D !default; $successButtonActiveBg:#15803D !default;
$successButtonTextActiveColor:$successButtonTextColor !default; $successButtonTextActiveColor:$successButtonTextColor !default;
$successButtonActiveBorderColor:#15803D !default; $successButtonActiveBorderColor:rgba(map-get($colors, "htwk-gruen"), .9) !default;
$successButtonFocusShadow:0 0 0 0.2rem #BBF7D0 !default; $successButtonFocusShadow:0 0 0 0.2rem map-get($colors, "htwk-gruen") !default;
$warningButtonBg:#f97316 !default; $warningButtonBg:#f97316 !default;
$warningButtonTextColor:#ffffff !default; $warningButtonTextColor:#ffffff !default;

48
frontend/public/themes/lara-light-blue/theme.css
View File

@@ -3317,20 +3317,20 @@
.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
color: #ffffff; color: #ffffff;
background: #004699; background: #004699;
border: 1px solid #00944c; border: 1px solid #004699;
} }
.p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover {
background: #0257c7; background: #0257c7;
color: #ffffff; color: #ffffff;
border-color: #rgba #004699, 0.8; border-color: #004699;
} }
.p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus {
box-shadow: 0 0 0 0.2rem rgba(0, 148, 76, 0.7); box-shadow: 0 0 0 0.2rem rgba(0, 70, 153, 0.7);
} }
.p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active {
background: rgba(0, 148, 76, 0.8); background: rgba(0, 70, 153, 0.8);
color: #ffffff; color: #ffffff;
border-color: rgba(0, 148, 76, 0.9); border-color: rgba(0, 70, 153, 0.9);
} }
.p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined {
background-color: transparent; background-color: transparent;
@@ -3364,51 +3364,51 @@
} }
.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
color: #ffffff; color: #ffffff;
background: #22C55E; background: #00964e;
border: 1px solid #22C55E; border: 1px solid #00964e;
} }
.p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover {
background: #16A34A; background: #00964e;
color: #ffffff; color: #ffffff;
border-color: #16A34A; border-color: #00964e;
} }
.p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus {
box-shadow: 0 0 0 0.2rem #BBF7D0; box-shadow: 0 0 0 0.2rem #00964e;
} }
.p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active {
background: #15803D; background: #15803D;
color: #ffffff; color: #ffffff;
border-color: #15803D; border-color: rgba(0, 150, 78, 0.9);
} }
.p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined {
background-color: transparent; background-color: transparent;
color: #22C55E; color: #00964e;
border: 1px solid; border: 1px solid;
} }
.p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover {
background: rgba(34, 197, 94, 0.04); background: rgba(0, 150, 78, 0.04);
color: #22C55E; color: #00964e;
border: 1px solid; border: 1px solid;
} }
.p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active {
background: rgba(34, 197, 94, 0.16); background: rgba(0, 150, 78, 0.16);
color: #22C55E; color: #00964e;
border: 1px solid; border: 1px solid;
} }
.p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text {
background-color: transparent; background-color: transparent;
color: #22C55E; color: #00964e;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover {
background: rgba(34, 197, 94, 0.04); background: rgba(0, 150, 78, 0.04);
border-color: transparent; border-color: transparent;
color: #22C55E; color: #00964e;
} }
.p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active {
background: rgba(34, 197, 94, 0.16); background: rgba(0, 150, 78, 0.16);
border-color: transparent; border-color: transparent;
color: #22C55E; color: #00964e;
} }
.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
color: #ffffff; color: #ffffff;
@@ -9440,7 +9440,7 @@
color: #ffffff; color: #ffffff;
} }
.p-badge.p-badge-success { .p-badge.p-badge-success {
background-color: #22C55E; background-color: #00964e;
color: #ffffff; color: #ffffff;
} }
.p-badge.p-badge-info { .p-badge.p-badge-info {
@@ -9965,7 +9965,7 @@
border-radius: 6px; border-radius: 6px;
} }
.p-tag.p-tag-success { .p-tag.p-tag-success {
background-color: #22C55E; background-color: #00964e;
color: #ffffff; color: #ffffff;
} }
.p-tag.p-tag-info { .p-tag.p-tag-info {
@@ -10059,7 +10059,7 @@
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
} }
.p-button.p-button-success:enabled:focus { .p-button.p-button-success:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #00964e, 0 1px 2px 0 rgb(0, 0, 0);
} }
.p-button.p-button-info:enabled:focus { .p-button.p-button-info:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #4d9eff, 0 1px 2px 0 rgb(0, 0, 0); box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #4d9eff, 0 1px 2px 0 rgb(0, 0, 0);

2
frontend/public/themes/lara-light-blue/theme.css.map
View File

File diff suppressed because one or more lines are too long