MOBILE-4348 style: Change css radius names
parent
7667774a2a
commit
efe2151dce
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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%;
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Reference in New Issue