mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
baa04cde4d
Using the :active pseudo works fine for desktop, but mobile is a completely different beast, especially with the quirks of each platform. By intentionally not using any :active selectors and manually adding/removing a .active class, it gives us a precise control on how the active state works for ALL platforms. Additionally, this places less selectors in the css, and reduces the possibility of unnecessary repaints. Currently this method of using .active instead of :active is being applied to .button and .item elements.
656 lines
14 KiB
SCSS
656 lines
14 KiB
SCSS
/**
|
|
* Items
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
.item {
|
|
@include item-style($item-default-bg, $item-default-border, $item-default-text);
|
|
@include transition(margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out);
|
|
|
|
position: relative;
|
|
z-index: $z-index-item; // Make sure the borders and stuff don't get hidden by children
|
|
display: block;
|
|
|
|
margin: $item-border-width * -1;
|
|
padding: $item-padding;
|
|
|
|
border-width: $item-border-width;
|
|
border-style: solid;
|
|
font-size: $item-font-size;
|
|
|
|
h2 {
|
|
margin: 0 0 4px 0;
|
|
font-size: 16px;
|
|
}
|
|
h3 {
|
|
margin: 0 0 4px 0;
|
|
font-size: 14px;
|
|
}
|
|
h4 {
|
|
margin: 0 0 4px 0;
|
|
font-size: 12px;
|
|
}
|
|
h5, h6 {
|
|
margin: 0 0 3px 0;
|
|
font-size: 10px;
|
|
}
|
|
p {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
h1:last-child,
|
|
h2:last-child,
|
|
h3:last-child,
|
|
h4:last-child,
|
|
h5:last-child,
|
|
h6:last-child,
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Align badges within items
|
|
.badge {
|
|
@include display-flex();
|
|
position: absolute;
|
|
top: $item-padding;
|
|
right: ($item-padding * 2) + 5;
|
|
}
|
|
&.item-divider .badge {
|
|
top: $item-padding / 2;
|
|
}
|
|
.badge + .badge {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
// Different themes for items
|
|
&.item-light {
|
|
@include item-style($item-light-bg, $item-light-border, $item-light-text);
|
|
}
|
|
&.item-stable {
|
|
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
|
|
}
|
|
&.item-positive {
|
|
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
|
|
}
|
|
&.item-calm {
|
|
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
|
|
}
|
|
&.item-assertive {
|
|
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
|
|
}
|
|
&.item-balanced {
|
|
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
|
|
}
|
|
&.item-energized {
|
|
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
|
|
}
|
|
&.item-royal {
|
|
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
|
|
}
|
|
&.item-dark {
|
|
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
|
|
}
|
|
|
|
}
|
|
|
|
// Link and Button Active States
|
|
.item.active:not(.item-divider):not(.item-input):not(.item-input-inset),
|
|
.item-complex.active .item-content {
|
|
@include item-active-style($item-default-active-bg, $item-default-active-border);
|
|
|
|
// Different active themes for <a> and <button> items
|
|
&.item-light {
|
|
@include item-active-style($item-light-active-bg, $item-light-active-border);
|
|
}
|
|
&.item-stable {
|
|
@include item-active-style($item-stable-active-bg, $item-stable-active-border);
|
|
}
|
|
&.item-positive {
|
|
@include item-active-style($item-positive-active-bg, $item-positive-active-border);
|
|
}
|
|
&.item-calm {
|
|
@include item-active-style($item-calm-active-bg, $item-calm-active-border);
|
|
}
|
|
&.item-assertive {
|
|
@include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
|
|
}
|
|
&.item-balanced {
|
|
@include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
|
|
}
|
|
&.item-energized {
|
|
@include item-active-style($item-energized-active-bg, $item-energized-active-border);
|
|
}
|
|
&.item-royal {
|
|
@include item-active-style($item-royal-active-bg, $item-royal-active-border);
|
|
}
|
|
&.item-dark {
|
|
@include item-active-style($item-dark-active-bg, $item-dark-active-border);
|
|
}
|
|
}
|
|
|
|
// Handle text overflow
|
|
.item,
|
|
.item h1,
|
|
.item h2,
|
|
.item h3,
|
|
.item h4,
|
|
.item h5,
|
|
.item h6,
|
|
.item p,
|
|
.item-content,
|
|
.item-content h1,
|
|
.item-content h2,
|
|
.item-content h3,
|
|
.item-content h4,
|
|
.item-content h5,
|
|
.item-content h6,
|
|
.item-content p {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Linked list items
|
|
a.item {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Complex Items
|
|
* --------------------------------------------------
|
|
* Adding .item-complex allows the .item to be slidable and
|
|
* have options underneath the button, but also requires an
|
|
* additional .item-content element inside .item.
|
|
* Basically .item-complex removes any default settings which
|
|
* .item added, so that .item-content looks them as just .item.
|
|
*/
|
|
|
|
.item-complex,
|
|
a.item.item-complex,
|
|
button.item.item-complex {
|
|
padding: 0;
|
|
}
|
|
.item-complex .item-content,
|
|
.item-radio .item-content {
|
|
/**
|
|
* The content area of a complex list item. This area can
|
|
* Slide left and right and be dragged to support different
|
|
* UI interactions.
|
|
*/
|
|
@include transition(all 0.1s ease-in-out);
|
|
position: relative;
|
|
z-index: $z-index-item;
|
|
|
|
padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
|
|
border: none;
|
|
|
|
background-color: white;
|
|
}
|
|
|
|
a.item-content {
|
|
display: block;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.item-text-wrap .item,
|
|
.item-text-wrap,
|
|
.item-text-wrap h1,
|
|
.item-text-wrap h2,
|
|
.item-text-wrap h3,
|
|
.item-text-wrap h4,
|
|
.item-text-wrap h5,
|
|
.item-text-wrap h6,
|
|
.item-text-wrap p,
|
|
.item-complex.item-text-wrap .item-content,
|
|
.item-body h1,
|
|
.item-body h2,
|
|
.item-body h3,
|
|
.item-body h4,
|
|
.item-body h5,
|
|
.item-body h6,
|
|
.item-body p {
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
}
|
|
.item-complex.item-text-wrap,
|
|
.item-complex.item-text-wrap h1,
|
|
.item-complex.item-text-wrap h2,
|
|
.item-complex.item-text-wrap h3,
|
|
.item-complex.item-text-wrap h4,
|
|
.item-complex.item-text-wrap h5,
|
|
.item-complex.item-text-wrap h6,
|
|
.item-complex.item-text-wrap p {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/**
|
|
* Item Icons
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
.item-icon-left .icon,
|
|
.item-icon-right .icon {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
font-size: $item-icon-font-size;
|
|
|
|
&:before {
|
|
display: block;
|
|
width: $item-icon-font-size;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.item .fill-icon {
|
|
min-width: $item-icon-fill-font-size + 2;
|
|
min-height: $item-icon-fill-font-size + 2;
|
|
font-size: $item-icon-fill-font-size;
|
|
}
|
|
|
|
.item-icon-left {
|
|
padding-left: ($item-padding * 3);
|
|
|
|
.icon {
|
|
left: $item-padding / 2;
|
|
}
|
|
}
|
|
.item-complex.item-icon-left {
|
|
padding-left: 0;
|
|
|
|
.item-content {
|
|
padding-left: ($item-padding * 3);
|
|
}
|
|
}
|
|
|
|
.item-icon-right {
|
|
padding-right: ($item-padding * 3);
|
|
|
|
.icon {
|
|
right: $item-padding / 2;
|
|
}
|
|
}
|
|
.item-complex.item-icon-right {
|
|
padding-right: 0;
|
|
|
|
.item-content {
|
|
padding-right: ($item-padding * 3);
|
|
}
|
|
}
|
|
|
|
.item-icon-left.item-icon-right .icon:first-child {
|
|
right: auto;
|
|
}
|
|
.item-icon-left.item-icon-right .icon:last-child {
|
|
left: auto;
|
|
}
|
|
|
|
|
|
/**
|
|
* Item Button
|
|
* --------------------------------------------------
|
|
* An item button is a child button inside an .item (not the entire .item)
|
|
*/
|
|
|
|
.item-button-left {
|
|
padding-left: $item-padding * 4.5;
|
|
}
|
|
|
|
.item-button-left > .button,
|
|
.item-button-left .item-content > .button {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
position: absolute;
|
|
top: $item-padding / 2;
|
|
left: $item-padding / 2;
|
|
min-width: $item-icon-font-size + ($button-border-width * 2);
|
|
min-height: $item-icon-font-size + ($button-border-width * 2);
|
|
font-size: $item-button-font-size;
|
|
line-height: $item-button-line-height;
|
|
|
|
.icon:before {
|
|
position: relative;
|
|
left: auto;
|
|
width: auto;
|
|
line-height: $item-icon-font-size - 1;
|
|
}
|
|
|
|
> .button {
|
|
margin: 0px 2px;
|
|
min-height: $item-icon-font-size + ($button-border-width * 2);
|
|
font-size: $item-button-font-size;
|
|
line-height: $item-button-line-height;
|
|
}
|
|
}
|
|
|
|
.item-button-right,
|
|
a.item.item-button-right,
|
|
button.item.item-button-right {
|
|
padding-right: $item-padding * 5;
|
|
}
|
|
|
|
.item-button-right > .button,
|
|
.item-button-right .item-content > .button,
|
|
.item-button-right > .buttons,
|
|
.item-button-right .item-content > .buttons {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
position: absolute;
|
|
top: $item-padding / 2;
|
|
right: $item-padding;
|
|
min-width: $item-icon-font-size + ($button-border-width * 2);
|
|
min-height: $item-icon-font-size + ($button-border-width * 2);
|
|
font-size: $item-button-font-size;
|
|
line-height: $item-button-line-height;
|
|
|
|
.icon:before {
|
|
position: relative;
|
|
left: auto;
|
|
width: auto;
|
|
line-height: $item-icon-font-size - 1;
|
|
}
|
|
|
|
> .button {
|
|
margin: 0px 2px;
|
|
min-width: $item-icon-font-size + ($button-border-width * 2);
|
|
min-height: $item-icon-font-size + ($button-border-width * 2);
|
|
font-size: $item-button-font-size;
|
|
line-height: $item-button-line-height;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Auto Right Arrow Icon
|
|
* --------------------------------------------------
|
|
* By default, if an .item is created out of an <a> or <button>
|
|
* then a arrow will be added to the right side of the item.
|
|
*/
|
|
|
|
a.item,
|
|
button.item,
|
|
.item a[href].item-content,
|
|
.item[ng-click] a.item-content {
|
|
padding-right: (($item-padding * 3) - 5);
|
|
}
|
|
|
|
a.item:after,
|
|
button.item:after,
|
|
.item a[href].item-content:after,
|
|
.item[ng-click] a.item-content:after {
|
|
/* By default, both <a> and <button> have right side arrow icons */
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
@include font-smoothing(antialiased);
|
|
position: absolute;
|
|
top: 0;
|
|
right: $item-padding - 4;
|
|
height: 100%;
|
|
color: #ccc;
|
|
content: "\f125"; // ion-chevron-right
|
|
text-transform: none;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
font-size: 16px;
|
|
font-family: 'Ionicons';
|
|
line-height: 1;
|
|
speak: none;
|
|
}
|
|
|
|
.grade-b,
|
|
.grade-c {
|
|
a.item:after,
|
|
button.item:after,
|
|
.item a[href].item-content:after,
|
|
.item[ng-click] a.item-content:after {
|
|
// override Ionicon arrow with boring character for low end devices
|
|
@include font-smoothing(none);
|
|
content: '>';
|
|
font-family: 'monospace';
|
|
}
|
|
}
|
|
|
|
// do not show the default right arrow when they want their own right side icon
|
|
a.item-icon-right:after,
|
|
button.item-icon-right:after,
|
|
a.item-button-right:after,
|
|
button.item-button-right:after,
|
|
.item a.item-content:after {
|
|
display: none;
|
|
}
|
|
|
|
|
|
// Item Avatar
|
|
// -------------------------------
|
|
|
|
.item-avatar {
|
|
padding-left: $item-avitar-width + ($item-padding * 2);
|
|
min-height: $item-avitar-width + ($item-padding * 2);
|
|
|
|
img:first-child, .item-img {
|
|
position: absolute;
|
|
top: $item-padding;
|
|
left: $item-padding;
|
|
max-width: $item-avitar-width;
|
|
max-height: $item-avitar-height;
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
|
|
// Item Thumbnails
|
|
// -------------------------------
|
|
|
|
.item-thumbnail-left,
|
|
.item-thumbnail-left .item-content {
|
|
padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
|
|
min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
|
|
|
|
> img:first-child, > .item-image {
|
|
position: absolute;
|
|
top: $item-thumbnail-margin;
|
|
left: $item-thumbnail-margin;
|
|
max-width: $item-thumbnail-width;
|
|
max-height: $item-thumbnail-height;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.item-thumbnail-left.item-complex {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.item-thumbnail-right,
|
|
.item-thumbnail-right .item-content {
|
|
padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
|
|
min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
|
|
|
|
> img:first-child, > .item-image {
|
|
position: absolute;
|
|
top: $item-thumbnail-margin;
|
|
right: $item-thumbnail-margin;
|
|
max-width: $item-thumbnail-width;
|
|
max-height: $item-thumbnail-height;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.item-thumbnail-left.item-complex {
|
|
padding-right: 0;
|
|
}
|
|
|
|
|
|
// Item Image
|
|
// -------------------------------
|
|
|
|
.item-image {
|
|
padding: 0;
|
|
text-align: center;
|
|
|
|
img:first-child, .list-img {
|
|
width: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
|
|
// Item Body
|
|
// -------------------------------
|
|
|
|
.item-body {
|
|
overflow: auto;
|
|
padding: $item-padding;
|
|
text-overflow: inherit;
|
|
white-space: normal;
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin-top: $item-padding;
|
|
margin-bottom: $item-padding;
|
|
}
|
|
}
|
|
|
|
|
|
// Item Divider
|
|
// -------------------------------
|
|
|
|
.item-divider {
|
|
padding-top: $item-padding / 2;
|
|
padding-bottom: $item-padding / 2;
|
|
min-height: 30px;
|
|
background-color: $item-divider-bg;
|
|
color: $item-divider-color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
// Item Note
|
|
// -------------------------------
|
|
|
|
.item-note {
|
|
float: right;
|
|
color: #aaa;
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
// Item Editing
|
|
// -------------------------------
|
|
|
|
.item-reordering {
|
|
position: absolute;
|
|
z-index: $z-index-item-reordering;
|
|
width: 100%;
|
|
}
|
|
|
|
.item-placeholder {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
|
|
/**
|
|
* The left-side edit area of a complex list item. This area shows
|
|
* whe the list item is in edit mode.
|
|
*/
|
|
.item-edit {
|
|
@include transition(left 0.2s ease-in-out, opacity 0.2s ease-in-out);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 8px;
|
|
z-index: $z-index-item-edit;
|
|
width: 48px;
|
|
height: 100%;
|
|
line-height: 100%;
|
|
|
|
.button {
|
|
height: 100%;
|
|
|
|
&.icon {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
color: $assertive;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
&.ng-enter {
|
|
@include transition(left 0.2s ease-in-out, opacity 0.2s ease-in-out);
|
|
left: -48px;
|
|
opacity: 0;
|
|
}
|
|
&.ng-enter-active {
|
|
left: 8px;
|
|
opacity: 1;
|
|
}
|
|
&.ng-leave {
|
|
@include transition(left 0.2s ease-in-out, opacity 0.2s ease-in-out);
|
|
left: 0px;
|
|
opacity: 1;
|
|
}
|
|
&.ng-leave-active {
|
|
left: -48px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.item-drag {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
width: 50px;
|
|
height: 100%;
|
|
background: inherit;
|
|
|
|
.button {
|
|
min-width: 42px;
|
|
height: 100%;
|
|
|
|
&.icon:before {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* The hidden right-side buttons that can be exposed under a list item
|
|
* with dragging.
|
|
*/
|
|
.item-options {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: $z-index-item-options;
|
|
height: 100%;
|
|
|
|
.button {
|
|
height: 100%;
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.item-options-hide .item-options {
|
|
display: none;
|
|
}
|