scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2626-error-message-multiroom-reward (pull request #2299)

Browse Source 
fix(SW-2626): add multiroom reward error message for mobile

* fix(SW-2626): add multiroom reward error message for mobile

* fix(SW-2626): error message to red color

* fix(SW-2626): fix errorContainer

* fix(SW-2626): fix button fullwidth

* fix(SW-2626): fix button fullwidth

* fix(SW-2626): add design

* fix(SW-2626): add new colors for checkbox

* fix(SW-2626): new color for input

* fix(SW-2626): fix pr comment

* fix(SW-2626): final ui for desktop and mobile


Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
Bianca Widstam
2025-06-12 12:51:37 +00:00
parent 2dd07eb6b8
commit 5b90e15746
15 changed files with 213 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/scandic-web/components/TempDesignSystem/Tooltip/tooltip.module.css
View File

@@ -5,8 +5,8 @@
.tooltip {
padding: var(--Spacing-x1);
background-color: var(--UI-Text-Active);
border: 0.5px solid var(--UI-Border-Active);
background-color: var(--Surface-UI-Fill-Intense);
border: 0.5px solid var(--Border-Interactive-Focus);
border-radius: var(--Corner-radius-md);
color: var(--Base-Text-Inverted);
position: absolute;
@@ -54,7 +54,8 @@
top: -8px;
left: 16px;
border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent;
border-color: transparent transparent var(--Border-Interactive-Focus)
transparent;
}
.bottom.arrowCenter::before {
@@ -62,21 +63,24 @@
left: 50%;
transform: translateX(-50%);
border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent;
border-color: transparent transparent var(--Border-Interactive-Focus)
transparent;
}
.bottom.arrowRight::before {
top: -8px;
right: 16px;
border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent;
border-color: transparent transparent var(--Border-Interactive-Focus)
transparent;
}
.top.arrowLeft::before {
bottom: -8px;
left: 16px;
border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent;
border-color: var(--Border-Interactive-Focus) transparent transparent
transparent;
}
.top.arrowCenter::before {
@@ -84,14 +88,16 @@
left: 50%;
transform: translateX(-50%);
border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent;
border-color: var(--Border-Interactive-Focus) transparent transparent
transparent;
}
.top.arrowRight::before {
bottom: -8px;
right: 16px;
border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent;
border-color: var(--Border-Interactive-Focus) transparent transparent
transparent;
}
.left.arrowTop::before {
@@ -99,7 +105,8 @@
right: -8px;
transform: translateY(-50%);
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active);
border-color: transparent transparent transparent
var(--Border-Interactive-Focus);
}
.left.arrowCenter::before {
@@ -107,7 +114,8 @@
right: -8px;
transform: translateY(-50%);
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active);
border-color: transparent transparent transparent
var(--Border-Interactive-Focus);
}
.left.arrowBottom::before {
@@ -115,7 +123,8 @@
right: -8px;
transform: translateY(50%);
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active);
border-color: transparent transparent transparent
var(--Border-Interactive-Focus);
}
.right.arrowTop::before {
@@ -123,7 +132,8 @@
left: -8px;
transform: translateY(-50%);
border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent;
border-color: transparent var(--Border-Interactive-Focus) transparent
transparent;
}
.right.arrowCenter::before {
@@ -131,7 +141,8 @@
left: -8px;
transform: translateY(-50%);
border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent;
border-color: transparent var(--Border-Interactive-Focus) transparent
transparent;
}
.right.arrowBottom::before {
@@ -139,7 +150,8 @@
left: -8px;
transform: translateY(50%);
border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent;
border-color: transparent var(--Border-Interactive-Focus) transparent
transparent;
}
@media screen and (max-width: 767px) {