mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
870dcd6f99
Both .active and .activated classes exist within the css now. When a button/link/item is “active”, the .activated class gets added and removed. This is so Ionic is not removing any user defined .active classes, but also so users can use Ionic’s active classes (but not have to worry about them being removed automatically by Ionic). Styled the same by default, but easily overridden.
717 lines
16 KiB
SCSS
717 lines
16 KiB
SCSS
/**
|
|
* Items
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
.item {
|
|
@include item-style($item-default-bg, $item-default-border, $item-default-text);
|
|
|
|
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-button-right .badge {
|
|
right: ($item-padding * 2) + 35;
|
|
}
|
|
&.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);
|
|
}
|
|
|
|
&[ng-click]:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
|
|
// Link and Button Active States
|
|
.item.active,
|
|
.item.activated,
|
|
.item-complex.active .item-content,
|
|
.item-complex.activated .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 {
|
|
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[href] .item-content,
|
|
.item[ng-click] .item-content {
|
|
padding-right: (($item-padding * 3) - 5);
|
|
|
|
&: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[href] .item-content:after,
|
|
.item[ng-click] .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,
|
|
.item-avatar .item-content {
|
|
padding-left: $item-avatar-width + ($item-padding * 2);
|
|
min-height: $item-avatar-width + ($item-padding * 2);
|
|
|
|
> img:first-child,
|
|
.item-image {
|
|
position: absolute;
|
|
top: $item-padding;
|
|
left: $item-padding;
|
|
max-width: $item-avatar-width;
|
|
max-height: $item-avatar-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-avatar.item-complex,
|
|
.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-right.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-left-editable .item-content,
|
|
.item-right-editable .item-content {
|
|
// setup standard transition settings
|
|
@include transition-duration( $item-edit-transition-duration );
|
|
@include transition-timing-function( $item-edit-transition-function );
|
|
@include transition-property( none );
|
|
}
|
|
|
|
.item-left-editable .item-content {
|
|
// set transition property for an item just left editable
|
|
-webkit-transition-property: -webkit-transform;
|
|
-moz-transition-property: -moz-transform;
|
|
transition-property: transform;
|
|
}
|
|
|
|
.item-right-editable .item-content {
|
|
// set transition property for an item just right editable
|
|
@include transition-property(margin-right);
|
|
}
|
|
|
|
.item-left-editable.item-right-editable .item-content {
|
|
// set transition property for an item that's both left/right editable
|
|
-webkit-transition-property: -webkit-transform, margin-right;
|
|
-moz-transition-property: -moz-transform, margin-right;
|
|
transition-property: transform, margin-right;
|
|
}
|
|
|
|
.list-left-editing .item-left-editable .item-content,
|
|
.item-left-editing.item-left-editable .item-content {
|
|
// actively editing the left side of the item
|
|
@include translate3d($item-left-edit-open-width, 0, 0);
|
|
}
|
|
|
|
.list-right-editing .item-right-editable .item-content,
|
|
.item-right-editing.item-right-editable .item-content {
|
|
// actively editing the right side of the item
|
|
margin-right: $item-right-edit-open-width;
|
|
}
|
|
|
|
|
|
// Item Left Edit Button
|
|
// -------------------------------
|
|
|
|
.item-left-edit {
|
|
@include transition(all $item-edit-transition-function $item-edit-transition-duration);
|
|
@include translate3d( $item-left-edit-left - $item-left-edit-open-width, 0, 0);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: $z-index-item-edit;
|
|
width: $item-left-edit-open-width;
|
|
height: 100%;
|
|
line-height: 100%;
|
|
opacity: 0;
|
|
|
|
.button {
|
|
height: 100%;
|
|
|
|
&.icon {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-left-editing .item-left-edit,
|
|
.item-left-editing .item-left-edit {
|
|
@include translate3d($item-left-edit-left, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
// Item Delete (Left side edit button)
|
|
// -------------------------------
|
|
|
|
.item-delete .button.icon {
|
|
color: $item-delete-icon-color;
|
|
font-size: $item-delete-icon-size;
|
|
|
|
&:hover {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
|
|
|
|
// Item Right Edit Button
|
|
// -------------------------------
|
|
|
|
.item-right-edit {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
width: $item-right-edit-open-width;
|
|
height: 100%;
|
|
background: inherit;
|
|
|
|
.button {
|
|
min-width: $item-right-edit-open-width;
|
|
height: 100%;
|
|
|
|
&.icon {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
font-size: $item-reorder-icon-size;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Item Reordering (Right side edit button)
|
|
// -------------------------------
|
|
|
|
.item-reorder .button.icon {
|
|
color: $item-reorder-icon-color;
|
|
font-size: $item-reorder-icon-size;
|
|
}
|
|
|
|
.item-reordering {
|
|
// item is actively being reordered
|
|
position: absolute;
|
|
z-index: $z-index-item-reordering;
|
|
width: 100%;
|
|
box-shadow: 0px 0px 10px 0px #aaa;
|
|
|
|
.item-reorder {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.item-placeholder {
|
|
// placeholder for the item that's being reordered
|
|
opacity: 0.7;
|
|
}
|
|
|
|
|
|
/**
|
|
* 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;
|
|
}
|