335 lines
7.5 KiB
SCSS
335 lines
7.5 KiB
SCSS
ion-item.item {
|
|
--detail-icon-color: var(--ion-item-detail-icon-color);
|
|
--detail-icon-font-size: var(--ion-item-detail-icon-font-size);
|
|
--detail-icon-opacity: var(--ion-item-detail-icon-opacity);
|
|
|
|
ion-input.in-item,
|
|
&.item-label > ion-label.label-stacked {
|
|
font-size: var(--mdl-typography-fontSize-lg);
|
|
}
|
|
|
|
> ion-icon[slot] {
|
|
color: var(--ion-item-icon-color);
|
|
}
|
|
|
|
&.item-lines-default {
|
|
/** Remove lines by default */
|
|
--inner-border-width: 0px;
|
|
--border-width: 0px;
|
|
}
|
|
|
|
&.ion-valid,
|
|
&.ion-invalid,
|
|
&.item-has-interactive-control {
|
|
&.item-lines-default {
|
|
--border-width: 0 0 1px 0;
|
|
}
|
|
|
|
&.ion-touched {
|
|
&.ion-invalid {
|
|
--ion-item-border-color: var(--highlight-color-invalid);
|
|
--highlight-background: var(--ion-item-border-color);
|
|
--border-color: var(--ion-item-border-color);
|
|
}
|
|
&.ion-valid {
|
|
--ion-item-border-color: var(--highlight-color-valid);
|
|
--highlight-background: var(--ion-item-border-color);
|
|
--border-color: var(--ion-item-border-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide details on items to align badges.
|
|
&.hide-detail {
|
|
--detail-icon-opacity: 0;
|
|
}
|
|
|
|
&:not(.item-input) {
|
|
--show-full-highlight: 0;
|
|
--show-inset-highlight: 0;
|
|
}
|
|
|
|
&.item-has-interactive-control:focus-within {
|
|
@include core-focus-outline();
|
|
}
|
|
|
|
&.icon-margin-reduced {
|
|
[slot=start] {
|
|
@include margin-horizontal(null, var(--mdl-spacing-4));
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fake item.
|
|
div.fake-ion-item {
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
outline: none;
|
|
color: var(--ion-text-color);
|
|
background: var(--ion-item-background);
|
|
text-align: initial;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.md div.fake-ion-item {
|
|
font-size: var(--text-size);
|
|
font-weight: normal;
|
|
text-transform: none;
|
|
@include padding(null, var(--mdl-spacing-4), null, var(--mdl-spacing-4));
|
|
@include margin(11px, null, 10px, null);
|
|
|
|
h1 {
|
|
@include margin(0, 0, 2px);
|
|
font-size: 24px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h2 {
|
|
@include margin(2px, 0);
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@include margin(2px, 0);
|
|
|
|
font-size: var(--text-size);
|
|
font-weight: normal;
|
|
|
|
line-height: normal;
|
|
}
|
|
|
|
p {
|
|
@include margin(0, 0, 2px);
|
|
font-size: var(--text-size);
|
|
line-height: 20px;
|
|
text-overflow: inherit;
|
|
overflow: inherit;
|
|
}
|
|
}
|
|
|
|
.ios div.fake-ion-item {
|
|
font-size: var(--text-size);
|
|
@include padding(null, 10px, null, 20px);
|
|
@include margin(10px, 8px, 10px, null);
|
|
|
|
h1 {
|
|
@include margin(3px, 0, 2px);
|
|
font-size: 22px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h2 {
|
|
@include margin(0, 0, 2px);
|
|
font-size: 17px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@include margin(0, 0, 3px);
|
|
font-size: var(--text-size);
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
}
|
|
|
|
p {
|
|
@include margin(0, 0, 2px 0);
|
|
font-size: var(--text-size);
|
|
line-height: normal;
|
|
text-overflow: inherit;
|
|
overflow: inherit;
|
|
}
|
|
|
|
}
|
|
|
|
// Item Headings.
|
|
// Some styles taken from ion-label
|
|
ion-item.item.item-label > ion-label,
|
|
.fake-ion-item > ion-label,
|
|
ion-item .in-item {
|
|
font-size: var(--text-size);
|
|
|
|
p {
|
|
--color: var(--subdued-text-color);
|
|
color: var(--color);
|
|
@include margin(2px, 0);
|
|
}
|
|
|
|
.item-heading {
|
|
@include margin(2px, 0);
|
|
|
|
font-size: 1rem;
|
|
font-weight: normal;
|
|
|
|
text-overflow: inherit;
|
|
overflow: inherit;
|
|
--color: initial;
|
|
color: var(--color);
|
|
|
|
&.item-heading-secondary {
|
|
@include margin(2px, 0);
|
|
|
|
font-size: var(--text-size);
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
|
|
--color: var(--subdued-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Correctly inherit ion-text-wrap onto labels.
|
|
.item > ion-label,
|
|
.fake-ion-item,
|
|
.item.ion-text-wrap > ion-checkbox::part(label),
|
|
ion-checkbox.ion-text-wrap::part(label)
|
|
.item.ion-text-wrap ion-toggle::part(label),
|
|
ion-toggle.ion-text-wrap::part(label) {
|
|
core-format-text,
|
|
core-format-text > *:not(pre) {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.item.ion-text-wrap > ion-label,
|
|
ion-item > .in-item,
|
|
.fake-ion-item.ion-text-wrap,
|
|
.item.ion-text-wrap > ion-checkbox::part(label),
|
|
ion-checkbox.ion-text-wrap::part(label),
|
|
ion-toggle.ion-text-wrap::part(label) {
|
|
core-format-text,
|
|
core-format-text > *:not(pre) {
|
|
white-space: normal;
|
|
overflow: inherit;
|
|
}
|
|
}
|
|
|
|
.item.ion-text-wrap > ion-label,
|
|
.item.ion-text-wrap ion-checkbox::part(label),
|
|
ion-checkbox.ion-text-wrap::part(label),
|
|
.item.ion-text-wrap ion-radio::part(label),
|
|
ion-radio.ion-text-wrap::part(label),
|
|
.item.ion-text-wrap ion-toggle::part(label),
|
|
ion-toggle.ion-text-wrap::part(label) {
|
|
white-space: normal !important;
|
|
}
|
|
|
|
ion-item .core-input-errors-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
ion-item.item.item-file {
|
|
ion-thumbnail {
|
|
--size: 32px;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
}
|
|
|
|
p.item-heading {
|
|
font-size: var(--text-size);
|
|
}
|
|
|
|
p {
|
|
font-size: var(--mdl-typography-fontSize-sm);
|
|
}
|
|
|
|
ion-label {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
ion-button {
|
|
--a11y-sizing-minTargetSize: 40px;
|
|
}
|
|
|
|
&.item-directory ion-icon {
|
|
@include margin-horizontal(0px, var(--mdl-spacing-4));
|
|
}
|
|
|
|
[slot=end] {
|
|
@include margin-horizontal(var(--mdl-spacing-4), null);
|
|
}
|
|
}
|
|
|
|
.item-dimmed {
|
|
opacity: 0.7;
|
|
--background: var(--light);
|
|
ion-item {
|
|
--background: var(--light);
|
|
}
|
|
}
|
|
|
|
// No highlight on RTE.
|
|
ion-item.item-rte {
|
|
--full-highlight-height: 0px !important;
|
|
}
|
|
|
|
// Make links clickable when inside radio or checkbox items. Style part.
|
|
@media (hover: hover) {
|
|
ion-item.item-multiple-inputs:not(.item-rte):hover::part(native) {
|
|
color: var(--color-hover);
|
|
|
|
&::after {
|
|
background: var(--background-hover);
|
|
opacity: var(--background-hover-opacity);
|
|
}
|
|
}
|
|
|
|
ion-item.ion-color.item-multiple-inputs:hover::part(native) {
|
|
color: #{current-color(contrast)};
|
|
|
|
&::after {
|
|
background: #{current-color(contrast)};
|
|
}
|
|
}
|
|
}
|
|
|
|
// It fixes the click on links where ion-ripple-effect is present.
|
|
// Make links clickable when inside radio or checkbox items. Pointer and cursor part.
|
|
ion-item.item-multiple-inputs:not(.only-links):not(.item-rte),
|
|
ion-item.ion-activatable:not(.only-links) {
|
|
cursor: pointer;
|
|
ion-label {
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
|
|
ion-anchor, a,
|
|
ion-button, button,
|
|
ion-item.ion-focusable,
|
|
audio, video, select, input, iframe {
|
|
pointer-events: visible;
|
|
}
|
|
}
|
|
|
|
ion-checkbox, ion-datetime, ion-radio, ion-select{
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
ion-item.item-multiple-inputs.only-links {
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
// Case with ion-input + ion-select inside.
|
|
ion-item.item-input.item-multiple-inputs {
|
|
.flex-row {
|
|
width: 100%;
|
|
ion-select {
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|