MOBILE-4348 style: Change css radius names

main
Pau Ferrer Ocaña 2023-09-26 12:17:34 +02:00
parent 7667774a2a
commit efe2151dce
18 changed files with 47 additions and 35 deletions

View File

@ -22,7 +22,7 @@
contain: content;
vertical-align: baseline;
text-decoration: none;
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
}
.s20 {
font-size: 1.5em;

View File

@ -24,7 +24,7 @@
contain: content;
vertical-align: baseline;
text-decoration: none;
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
}
.s20 {
font-size: 2.7em;

View File

@ -16,7 +16,7 @@
.core-avatar-extra-img {
background: var(--background-color);
border-radius: var(--medium-radius);
border-radius: var(--radius-sm);
img {
max-width: var(--extra-icon-size);
max-height: var(--extra-icon-size);
@ -39,7 +39,7 @@
}
padding: 0.7rem;
background: var(--background-color);
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
}
.core-notification-icon {

View File

@ -1,6 +1,6 @@
.core-error-info {
background: var(--gray-200);
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
font-size: var(--font-size-sm);
color: var(--gray-900);

View File

@ -18,7 +18,7 @@
position: relative;
border: 0;
border-radius: var(--medium-radius);
border-radius: var(--radius-sm);
margin: 8px;
width: 90%;
max-width: var(--list-item-max-width);

View File

@ -3,7 +3,7 @@
--textarea-color: var(--core-input-text);
--textarea-border-width: var(--core-input-border-width);
--textarea-border-color: var(--core-input-stroke);
--textarea-radius: var(--huge-radius);
--textarea-radius: var(--radius-xl);
form {
position: relative;

View File

@ -17,7 +17,7 @@
}
.sheet-modal--wrapper {
border-radius: var(--big-radius) var(--big-radius) 0 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
@include padding(24px, 16px, 24px, 16px);
background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff));

View File

@ -20,7 +20,7 @@
div.core-timer {
background: var(--timer-background);
color: var(--timer-text-color, var(--text-color));
border-radius: var(--big-radius);
border-radius: var(--radius-lg);
}
button {

View File

@ -21,7 +21,7 @@
.core-module-info-box {
background: var(--light);
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
margin: 8px;
padding: 8px;

View File

@ -55,7 +55,7 @@
.core-course-module-info {
.core-module-dates-availabilityinfo {
background: var(--light);
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
padding: 8px;
}

View File

@ -43,8 +43,8 @@
.course-container {
position: relative;
top: calc(var(--thumb-height) - var(--big-radius));
border-radius: var(--big-radius) var(--big-radius) 0 0;
top: calc(var(--thumb-height) - var(--radius-lg));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background-color: var(--ion-background-color);
box-shadow: var(--drop-shadow-top);
clip-path: inset(-5px 0px 0px 0px);
@ -68,7 +68,7 @@
.core-course-dates {
background: var(--light);
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
padding: 8px;
width: 100%;

View File

@ -2,7 +2,7 @@
.core-module-availabilityinfo {
background: var(--light);
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
padding: 8px;
font-size: 90%;
::ng-deep ul {

View File

@ -125,7 +125,7 @@
margin: 0 auto;
font-size: 18px;
background-color: var(--toobar-background);
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
@include core-transition(background-color, 200ms);
color: var(--button-color);
cursor: pointer;

View File

@ -38,7 +38,7 @@
min-width: var(--toggle-size);
height: var(--toggle-size);
width: var(--toggle-size);
--border-radius: var(--huge-radius);
--border-radius: var(--radius-xl);
border-radius: var(--border-radius);
--padding-start: 0px;
--padding-end: 0px;

View File

@ -74,7 +74,7 @@ core-format-text {
position: absolute;
@include position(null, 10px, 10px, null);
color: var(--ion-text-color);
border-radius: var(--huge-radius);
border-radius: var(--radius-xl);
background-color: var(--core-format-text-viewer-icon-background);
display: flex;
@ -284,7 +284,7 @@ core-rich-text-editor .core-rte-editor {
border: 1px solid var(--gray-500);
background: var(--contrast-background);
padding: 6px 8px;
border-radius: var(--small-radius);
border-radius: var(--radius-xs);
margin-left: 2px;
margin-right: 2px;
margin-bottom: 10px;

View File

@ -166,7 +166,7 @@ ion-header {
--color: var(--core-header-buttons-color);
--background: var(--core-header-buttons-background);
--ion-toolbar-color: var(--core-header-buttons-color);
--border-radius: var(--huge-radius);
--border-radius: var(--radius-xl);
--primary: var(--core-header-buttons-color);
}
ion-back-button::part(text) {
@ -376,7 +376,7 @@ ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon {
}
ion-button.button.button-clear.button-has-icon-only {
--border-radius: var(--huge-radius);
--border-radius: var(--radius-xl);
}
ion-button.button.button-clear {
@ -498,7 +498,7 @@ ion-alert .alert-button.timed-button{
}
ion-alert {
--border-radius: var(--huge-radius);
--border-radius: var(--radius-xl);
&.md, &.ios {
--max-width: 80%;
@ -531,7 +531,7 @@ ion-alert {
}
ion-loading {
--border-radius: var(--huge-radius);
--border-radius: var(--radius-xl);
.loading-wrapper {
border-radius: var(--border-radius) !important;
@ -741,7 +741,7 @@ body.core-iframe-fullscreen ion-router-outlet {
}
.core-password-modal {
--border-radius: var(--medium-radius);
--border-radius: var(--radius-sm);
--min-width: auto;
--min-height: 300px;
--width: 384px;
@ -837,6 +837,7 @@ body.core-iframe-fullscreen ion-router-outlet {
--border-width: 0;
--border-color: var(--color-tint);
--border-radius: var(--radius-sm);
--background: var(--color-tint);
--color: var(--color-shade);
@ -978,7 +979,7 @@ ion-action-sheet.md {
}
.action-sheet-group:first-child {
border-radius: var(--big-radius) var(--big-radius) 0 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.action-sheet-group-cancel {
@ -1125,7 +1126,7 @@ ion-select-popover {
ion-badge {
line-height: 1.1;
padding: 2px 8px;
border-radius: var(--big-radius);
border-radius: var(--radius-lg);
}
ion-chip,

View File

@ -10,10 +10,21 @@ html {
--font-size-normal: 14px;
// Radiuses
--small-radius: 4px;
--medium-radius: 8px;
--big-radius: 16px;
--huge-radius: 24px;
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-round: 50%;
/** @deprecated since 4.3 **/
--small-radius: var(--radius-xs);
--medium-radius: var(--radius-sm);
--big-radius: var(--radius-lg);
--huge-radius: var(--radius-xl);
// A11y
--a11y-min-target-size: 44px;

View File

@ -67,11 +67,11 @@ html {
--core-input-stroke: var(--gray-500);
--core-input-text: var(--dark);
--core-input-background: var(--ion-background-color);
--core-input-radius: var(--small-radius);
--core-input-radius: var(--radius-xs);
--core-input-border-width: 1px;
--module-icon-size: 24px;
--module-icon-radius: var(--medium-radius);
--module-icon-radius: var(--sm-radius);
--list-item-max-width: 768px;
@ -82,7 +82,7 @@ html {
--loader-background-color: rgba(0, 0, 0, .1);
--loader-shine: 251, 251, 251;
--loader-radius: var(--small-radius);
--loader-radius: var(--radius-xs);
--loader-display: block;
--drop-shadow-color: 0, 0, 0, 0.5;
@ -96,7 +96,7 @@ html {
--ion-card-color: var(--text-color);
--ion-card-vertical-margin: 10px;
--ion-card-horizontal-margin: 10px;
--ion-card-radius: var(--medium-radius);
--ion-card-radius: var(--radius-sm);
--ion-card-border-width: 1px;
--ion-card-border-color: var(--stroke);
ion-card {
@ -333,7 +333,7 @@ html {
--core-avatar-radius: 50%;
--core-courseimage-on-course-size: 72px;
--core-courseimage-radius: var(--medium-radius);
--core-courseimage-radius: var(--radius-sm);
--core-navigation-background: var(--contrast-background);