CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-4348 style: Change css radius names

Browse Source
This commit is contained in:
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/block/blogtags/components/blogtags/blogtags.scss
View File

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

2
src/addons/block/tags/components/tags/tags.scss
View File

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

4
src/addons/notifications/notifications.scss
View File

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

2
src/core/components/error-info/error-info.scss
View File

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

2
src/core/components/message/message.scss
View File

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

2
src/core/components/send-message-form/send-message-form.scss
View File

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

2
src/core/components/sheet-modal/sheet-modal.scss
View File

@ -17,7 +17,7 @@
} }
.sheet-modal--wrapper { .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); @include padding(24px, 16px, 24px, 16px);
background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)); background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff));

2
src/core/components/timer/timer.scss
View File

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

2
src/core/features/course/components/module-info/course-module-info.scss
View File

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

2
src/core/features/course/components/module/module.scss
View File

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

6
src/core/features/course/pages/course-summary/course-summary.scss
View File

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

2
src/core/features/course/pages/module-preview/module-preview.scss
View File

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

2
src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
View File

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

2
src/theme/components/collapsible-item.scss
View File

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

4
src/theme/components/format-text.scss
View File

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

15
src/theme/theme.base.scss
View File

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

19
src/theme/theme.design-system.scss
View File

@ -10,10 +10,21 @@ html {
--font-size-normal: 14px; --font-size-normal: 14px;
// Radiuses // Radiuses
--small-radius: 4px; --radius-none: 0px;
--medium-radius: 8px; --radius-xs: 4px;
--big-radius: 16px; --radius-sm: 8px;
--huge-radius: 24px; --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
--a11y-min-target-size: 44px; --a11y-min-target-size: 44px;

10
src/theme/theme.light.scss
View File

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