chore: replace old border-radius variables with new tokens
This commit is contained in:
+1
-1
@@ -34,7 +34,7 @@
|
||||
|
||||
.accordionItem.card .summary {
|
||||
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.accordionItem.sidepeek .summary {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.accordion.card {
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.accordion.light {
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
/* Intent: inline */
|
||||
.inline {
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
.backToTopButton {
|
||||
border-radius: var(--Corner-radius-Rounded);
|
||||
border-radius: var(--Corner-radius-rounded);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
min-width: 169px;
|
||||
outline: none;
|
||||
box-shadow: 0 0 4px 2px rgb(0 0 0 / 10%);
|
||||
@@ -87,7 +87,7 @@
|
||||
|
||||
.dialogLink {
|
||||
display: block;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
padding: var(--Spacing-x1);
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.btn {
|
||||
background: none;
|
||||
border-radius: var(--Corner-radius-Rounded);
|
||||
border-radius: var(--Corner-radius-rounded);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
min-height: 180px; /* Fixed height from Figma */
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
margin-right: var(--Spacing-x2);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
@@ -4,7 +4,7 @@ div.chip {
|
||||
align-items: center;
|
||||
color: var(--chip-text-color);
|
||||
background-color: var(--chip-background-color);
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
justify-content: center;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
gap: var(--Spacing-x-half);
|
||||
padding: calc(var(--Spacing-x1) - 2px) var(--Spacing-x-one-and-half);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
cursor: pointer;
|
||||
height: 32px;
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
border-color: var(--Scandic-Beige-40);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: grid;
|
||||
min-width: 0; /* allow shrinkage */
|
||||
height: 60px;
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
border-color: var(--Scandic-Beige-40);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: grid;
|
||||
height: 60px;
|
||||
padding: var(--Spacing-x1) var(--Spacing-x2);
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
.phone :global(.react-international-phone-country-selector-dropdown) {
|
||||
background: var(--Main-Grey-White);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
|
||||
gap: var(--Spacing-x1);
|
||||
outline: none;
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
.phone
|
||||
:global(.react-international-phone-country-selector-dropdown__list-item) {
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
|
||||
var(--Spacing-x-one-and-half);
|
||||
}
|
||||
@@ -61,7 +61,7 @@
|
||||
border-color: var(--Scandic-Beige-40);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: grid;
|
||||
gap: var(--Spacing-x-half);
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid var(--Base-Border-Inverted);
|
||||
border-radius: var(--Corner-radius-Rounded);
|
||||
border-radius: var(--Corner-radius-rounded);
|
||||
background-color: var(--Surface-Feedback-Succes-Accent);
|
||||
}
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
border-color: var(--Scandic-Beige-40);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: grid;
|
||||
min-width: 0; /* allow shrinkage */
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
}
|
||||
|
||||
.blue {
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
line-height: var(--typography-Body-Regular-lineHeight);
|
||||
letter-spacing: var(--typography-Body-Regular-letterSpacing);
|
||||
padding: var(--Spacing-x1);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
justify-content: space-between;
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
.myPageMobileDropdown:hover {
|
||||
background-color: var(--Base-Surface-Primary-light-Hover-alt);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
@@ -90,7 +90,7 @@
|
||||
|
||||
.sidebar {
|
||||
align-items: center;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
padding: var(--Spacing-x1);
|
||||
@@ -261,7 +261,7 @@
|
||||
padding: var(--Spacing-x1);
|
||||
gap: var(--Spacing-x-one-and-half);
|
||||
color: var(--Base-Text-High-contrast);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.menu:hover {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
background-color: var(--Base-Button-Inverted-Fill-Normal);
|
||||
transition: background-color 0.3s;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.container {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
border-radius: var(--Corner-radius-xLarge);
|
||||
border-radius: var(--Corner-radius-xl);
|
||||
gap: var(--Spacing-x2);
|
||||
min-height: 480px;
|
||||
justify-content: space-between;
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
.card {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
.openedInfo {
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
padding: var(--Spacing-x2);
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.root {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
box-shadow: var(--popup-box-shadow);
|
||||
padding: var(--Spacing-x2);
|
||||
max-width: calc(360px + var(--Spacing-x2) * 2);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
.select {
|
||||
border: 1px solid var(--Base-Border-Normal);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
@@ -49,7 +49,7 @@
|
||||
align-items: center;
|
||||
background-color: var(--UI-Opacity-White-100);
|
||||
border: none;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
color: var(--UI-Text-High-contrast);
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
.popover {
|
||||
background-color: var(--Main-Grey-White);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
@@ -100,7 +100,7 @@
|
||||
.listBoxItem[data-focused="true"],
|
||||
.listBoxItem[data-selected="true"] {
|
||||
background: var(--UI-Input-Controls-Surface-Hover);
|
||||
border-radius: var(--Corner-radius-Medium,);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -31,13 +31,13 @@
|
||||
}
|
||||
|
||||
.smallRadius {
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
}
|
||||
.mediumRadius {
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
.largeRadius {
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
}
|
||||
|
||||
.content .thead {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.card {
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.toast {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--Base-Surface-Primary-light-Normal);
|
||||
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
padding: var(--Spacing-x1);
|
||||
background-color: var(--UI-Text-Active);
|
||||
border: 0.5px solid var(--UI-Border-Active);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
color: var(--Base-Text-Inverted);
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
|
||||
Reference in New Issue
Block a user