MOBILE-4470 styles: Move styles around and change opacities
Pau Ferrer Ocaña
parent
e779c7a7f2
commit
7fc7aa78d6
|
|
@ -55,7 +55,7 @@
|
|||
<!-- Template for units entered using radio buttons. -->
|
||||
<ng-template #radioUnits>
|
||||
<ion-radio-group [(ngModel)]="question!.unit" [name]="question!.optionsName">
|
||||
<ion-item class="ion-text-wrap" *ngFor="let option of question!.options">
|
||||
<ion-item class="ion-text-wrap" *ngFor="let option of question!.options" lines="none">
|
||||
<ion-radio [value]="option.value" [disabled]="option.disabled || question!.input?.readOnly"
|
||||
[color]="question!.input?.correctIconColor">
|
||||
{{ option.text }}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<!-- Radio buttons for single choice. -->
|
||||
<ion-radio-group *ngIf="!question.multi" [(ngModel)]="question.singleChoiceModel" [name]="question.optionsName">
|
||||
<ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
|
||||
<ion-item class="ion-text-wrap answer" *ngFor="let option of question.options" lines="none">
|
||||
<ion-radio [value]="option.value" [disabled]="option.disabled"
|
||||
[color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -35,3 +35,16 @@ ion-action-sheet {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// File uploader.
|
||||
.action-sheet-button input.core-fileuploader-file-handler-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,75 @@
|
|||
@keyframes scaleFrom0 {
|
||||
from {
|
||||
/* More performant than animating `width` */
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
ion-alert {
|
||||
--border-radius: var(--modal-radius);
|
||||
|
||||
&.md, &.ios {
|
||||
--max-width: 80%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
--max-width: 384px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-wrapper {
|
||||
overflow: auto;
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
button.alert-button.alert-button-role-destructive {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
user-select: text;
|
||||
flex-shrink: 0;
|
||||
|
||||
ion-card {
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.md .alert-button {
|
||||
// Remove padding from alert buttons, they already have min accessibility height.
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.alert-button.timed-button{
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background-color: var(--primary-tint);
|
||||
animation: scaleFrom0 10s forwards linear;
|
||||
transform-origin: left;
|
||||
@include rtl() {
|
||||
transform-origin: right;
|
||||
}
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&.core-alert-force-on-top {
|
||||
z-index: 100000 !important;
|
||||
}
|
||||
|
||||
&.core-nohead .alert-head,
|
||||
.alert-head:empty {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@ ion-button {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
&.button-disabled {
|
||||
opacity: var(--mdl-button-disabled-opacity) !important;
|
||||
}
|
||||
|
||||
&.button-outline {
|
||||
--border-width: var(--core-input-border-width);
|
||||
--border-color: var(--core-input-stroke);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,26 @@
|
|||
ion-checkbox {
|
||||
&.checkbox-disabled::part(label) {
|
||||
opacity: 0.8;
|
||||
|
||||
// Checkbox.
|
||||
ion-checkbox,
|
||||
input[type=checkbox] {
|
||||
--border-radius: 2px;
|
||||
--border-width: 2px;
|
||||
--outer-border-width: 2px;
|
||||
--border-style: solid;
|
||||
--size: 20px;
|
||||
|
||||
&:not(.ion-color) {
|
||||
--border-color-checked: var(--text-color);
|
||||
--checkbox-background-checked: var(--text-color);
|
||||
--checkmark-color: var(--contrast-background);
|
||||
}
|
||||
}
|
||||
|
||||
ion-checkbox {
|
||||
&.checkbox-disabled::part(label) {
|
||||
opacity: var(--mdl-input-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.ios input[type=checkbox] {
|
||||
--outer-border-width: 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
ion-item.item-label-stacked ion-datetime-button {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
align-self: self-end;
|
||||
}
|
||||
|
||||
ion-datetime-button p {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
ion-datetime.datetime-disabled {
|
||||
opacity: var(--mdl-input-disabled-opacity) !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
|
||||
// Hide close button because when present is read on voice over.
|
||||
ion-fab[core-fab] {
|
||||
ion-fab-button::part(close-icon) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// The following 4 selectors can probably be removed after Ionic migration to 7+
|
||||
ion-fab.fab-horizontal-start {
|
||||
left: calc(10px + var(--ion-safe-area-right, 0px));
|
||||
}
|
||||
|
||||
&[dir=rtl] ion-fab.fab-horizontal-start {
|
||||
right: calc(10px + var(--ion-safe-area-right, 0px));
|
||||
left: unset
|
||||
}
|
||||
|
||||
ion-fab.fab-horizontal-end {
|
||||
right: calc(10px + var(--ion-safe-area-right, 0px));
|
||||
}
|
||||
|
||||
&[dir=rtl] ion-fab.fab-horizontal-end {
|
||||
left: calc(10px + var(--ion-safe-area-right, 0px));
|
||||
right: unset
|
||||
}
|
||||
|
||||
ion-content.has-collapsible-footer ion-fab {
|
||||
bottom: calc(var(--core-collapsible-footer-height, 0px) + 10px);
|
||||
@include core-transition(all, 200ms);
|
||||
}
|
||||
|
||||
ion-fab-button {
|
||||
--box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
ion-input {
|
||||
&.input-disabled.md, &.input-disabled.ios {
|
||||
opacity: 0.8;
|
||||
opacity: var(--mdl-input-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ ion-item.item {
|
|||
}
|
||||
|
||||
&.ion-valid,
|
||||
&.ion-invalid {
|
||||
&.ion-invalid,
|
||||
&.item-has-interactive-control {
|
||||
&.item-lines-default {
|
||||
--border-width: 0 0 1px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,63 @@
|
|||
ion-radio {
|
||||
&.radio-disabled::part(label) {
|
||||
opacity: 0.8;
|
||||
|
||||
// Radio.
|
||||
ion-radio,
|
||||
input[type=radio],
|
||||
.select-alert .alert-radio-icon {
|
||||
--border-radius: 50%;
|
||||
--border-width: 2px;
|
||||
--outer-border-width: 2px;
|
||||
--border-style: solid;
|
||||
--size: 20px;
|
||||
|
||||
&:not(.ion-color) {
|
||||
--color: var(--text-color);
|
||||
--color-checked: var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
.ios ion-radio,
|
||||
.ios input[type=radio],
|
||||
.select-alert.ios .alert-radio-icon {
|
||||
--border-width: 1px;
|
||||
--outer-border-width: 1px;
|
||||
}
|
||||
|
||||
.ios ion-radio {
|
||||
&::part(container) {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
margin: 0px;
|
||||
border-radius: var(--border-radius);
|
||||
border-width: var(--outer-border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--color);
|
||||
}
|
||||
|
||||
&::part(mark) {
|
||||
border-radius: var(--inner-border-radius);
|
||||
width: calc(50% + var(--outer-border-width));
|
||||
height: calc(50% + var(--outer-border-width));
|
||||
transform: scale3d(0, 0, 0);
|
||||
transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
|
||||
background: var(--contrast-background);
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
&.radio-checked {
|
||||
&::part(container) {
|
||||
border-color: var(--color);
|
||||
background: var(--color);
|
||||
}
|
||||
|
||||
&::part(mark) {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-radio {
|
||||
&.radio-disabled::part(label) {
|
||||
opacity: var(--mdl-input-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ ion-select {
|
|||
opacity: 1;
|
||||
}
|
||||
&.select-disabled {
|
||||
opacity: 0.8;
|
||||
opacity: var(--mdl-input-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -111,10 +111,6 @@ button,
|
|||
}
|
||||
}
|
||||
|
||||
ion-fab-button {
|
||||
--box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
|
||||
}
|
||||
|
||||
[role="button"],
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
|
|
@ -123,14 +119,14 @@ ion-fab-button {
|
|||
[disabled],
|
||||
[aria-disabled="true"] {
|
||||
cursor: default;
|
||||
opacity: .4;
|
||||
opacity: var(--mdl-button-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
cursor: default;
|
||||
opacity: .4;
|
||||
opacity: var(--mdl-button-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -188,72 +184,6 @@ div.core-iframe-network-error {
|
|||
left: -15%;
|
||||
}
|
||||
|
||||
ion-alert.core-nohead .alert-head,
|
||||
ion-alert .alert-head:empty {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@keyframes scaleFrom0 {
|
||||
from {
|
||||
/* More performant than animating `width` */
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
ion-alert .alert-button.timed-button{
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background-color: var(--primary-tint);
|
||||
animation: scaleFrom0 10s forwards linear;
|
||||
transform-origin: left;
|
||||
@include rtl() {
|
||||
transform-origin: right;
|
||||
}
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
ion-alert {
|
||||
--border-radius: var(--modal-radius);
|
||||
|
||||
&.md, &.ios {
|
||||
--max-width: 80%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
--max-width: 384px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-wrapper {
|
||||
overflow: auto;
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
button.alert-button.alert-button-role-destructive {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
user-select: text;
|
||||
flex-shrink: 0;
|
||||
|
||||
ion-card {
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Ionic list.
|
||||
ion-list {
|
||||
padding: 0 !important;
|
||||
|
|
@ -545,103 +475,12 @@ ion-content.limited-width > :not([slot]) {
|
|||
min-height: 100%;
|
||||
}
|
||||
|
||||
// Radio.
|
||||
ion-radio,
|
||||
input[type=radio],
|
||||
.select-alert .alert-radio-icon {
|
||||
--border-radius: 50%;
|
||||
--border-width: 2px;
|
||||
--outer-border-width: 2px;
|
||||
--border-style: solid;
|
||||
--size: 20px;
|
||||
|
||||
&:not(.ion-color) {
|
||||
--color: var(--text-color);
|
||||
--color-checked: var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
.ios ion-radio,
|
||||
.ios input[type=radio],
|
||||
.select-alert.ios .alert-radio-icon {
|
||||
--border-width: 1px;
|
||||
--outer-border-width: 1px;
|
||||
}
|
||||
|
||||
.ios ion-radio {
|
||||
&::part(container) {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
margin: 0px;
|
||||
border-radius: var(--border-radius);
|
||||
border-width: var(--outer-border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--color);
|
||||
}
|
||||
|
||||
&::part(mark) {
|
||||
border-radius: var(--inner-border-radius);
|
||||
width: calc(50% + var(--outer-border-width));
|
||||
height: calc(50% + var(--outer-border-width));
|
||||
transform: scale3d(0, 0, 0);
|
||||
transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
|
||||
background: var(--contrast-background);
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
&.radio-checked {
|
||||
&::part(container) {
|
||||
border-color: var(--color);
|
||||
background: var(--color);
|
||||
}
|
||||
|
||||
&::part(mark) {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkbox.
|
||||
ion-checkbox,
|
||||
input[type=checkbox] {
|
||||
--border-radius: 2px;
|
||||
--border-width: 2px;
|
||||
--outer-border-width: 2px;
|
||||
--border-style: solid;
|
||||
--size: 20px;
|
||||
|
||||
&:not(.ion-color) {
|
||||
--border-color-checked: var(--text-color);
|
||||
--checkbox-background-checked: var(--text-color);
|
||||
--checkmark-color: var(--contrast-background);
|
||||
}
|
||||
}
|
||||
|
||||
.ios input[type=checkbox] {
|
||||
--outer-border-width: 1px;
|
||||
}
|
||||
|
||||
ion-badge {
|
||||
line-height: 1.1;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--mdl-shape-borderRadius-lg);
|
||||
}
|
||||
|
||||
// File uploader.
|
||||
.action-sheet-button input.core-fileuploader-file-handler-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.core-anchor, core-format-text a {
|
||||
color: var(--core-link-color);
|
||||
cursor: pointer;
|
||||
|
|
@ -721,37 +560,6 @@ textarea:not([core-auto-rows]) {
|
|||
height: 200px;
|
||||
}
|
||||
|
||||
// Hide close button because when present is read on voice over.
|
||||
ion-fab[core-fab] {
|
||||
ion-fab-button::part(close-icon) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// The following 4 selectors can probably be removed after Ionic migration to 7+
|
||||
ion-fab.fab-horizontal-start {
|
||||
left: calc(10px + var(--ion-safe-area-right, 0px));
|
||||
}
|
||||
|
||||
[dir=rtl] ion-fab.fab-horizontal-start {
|
||||
right: calc(10px + var(--ion-safe-area-right, 0px));
|
||||
left: unset
|
||||
}
|
||||
|
||||
ion-fab.fab-horizontal-end {
|
||||
right: calc(10px + var(--ion-safe-area-right, 0px));
|
||||
}
|
||||
|
||||
[dir=rtl] ion-fab.fab-horizontal-end {
|
||||
left: calc(10px + var(--ion-safe-area-right, 0px));
|
||||
right: unset
|
||||
}
|
||||
|
||||
ion-content.has-collapsible-footer ion-fab {
|
||||
bottom: calc(var(--core-collapsible-footer-height, 0px) + 10px);
|
||||
@include core-transition(all, 200ms);
|
||||
}
|
||||
|
||||
.core-media-adapt-width {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -766,10 +574,8 @@ audio.core-media-adapt-width {
|
|||
|
||||
// Disabled items.
|
||||
ion-item.item-disabled,
|
||||
ion-button.button-disabled,
|
||||
ion-item.item-interactive-disabled:not(.item-multiple-inputs) ion-label,
|
||||
ion-datetime.datetime-disabled {
|
||||
opacity: .65 !important;
|
||||
ion-item.item-interactive-disabled:not(.item-multiple-inputs) ion-label {
|
||||
opacity: var(--mdl-item-disabled-opacity) !important;
|
||||
}
|
||||
|
||||
ion-item-divider.item,
|
||||
|
|
@ -803,7 +609,7 @@ ion-input input,
|
|||
ion-textarea,
|
||||
core-rich-text-editor {
|
||||
--placeholder-color: var(--ion-placeholder-color);
|
||||
--placeholder-opacity: .65;
|
||||
--placeholder-opacity: var(--mdl-placeholder-opacity);
|
||||
}
|
||||
|
||||
// Disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. See split-view component for more info.
|
||||
|
|
@ -992,18 +798,6 @@ video::-webkit-media-text-track-display {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
// Ion Datetime
|
||||
ion-item.item-label-stacked ion-datetime-button {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
align-self: self-end;
|
||||
}
|
||||
|
||||
ion-datetime-button p {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.x-scrollable {
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -140,6 +140,12 @@ html {
|
|||
--mdl-shadow-boxShadow-16: 0px 7px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%),0px 5px 22px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%),0px 12px 17px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||
--mdl-shadow-boxShadow-24: 0px 11px 15px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 9px 46px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 24px 38px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||
|
||||
// ***** OPACITY category ***** //
|
||||
--mdl-button-disabled-opacity: 0.6;
|
||||
--mdl-input-disabled-opacity: 0.6;
|
||||
--mdl-item-disabled-opacity: 0.4;
|
||||
--mdl-placeholder-opacity: 0.6;
|
||||
|
||||
// ***** ACCESSIBILITY ***** //
|
||||
--a11y-sizing-minTargetSize: 44px;
|
||||
--a11y-shadow-focus-borderWidth: 2px;
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ html {
|
|||
@import "components/ion-checkbox.scss";
|
||||
@import "components/ion-chip.scss";
|
||||
@import "components/ion-content.scss";
|
||||
@import "components/ion-datetime.scss";
|
||||
@import "components/ion-fab.scss";
|
||||
@import "components/ion-header.scss";
|
||||
@import "components/ion-icon.scss";
|
||||
@import "components/ion-input.scss";
|
||||
|
|
|
|||
Loading…
Reference in New Issue