javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

items scss cleanup

Browse Source
This commit is contained in:
Adam Bradley
2013-11-27 07:43:10 -06:00
parent a1688b3771
commit b70dc49a24
1 changed files with 12 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
scss/_items.scss
View File

@@ -5,21 +5,19 @@
.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: 2; // Make sure the borders and stuff don't get hidden by children
display: block;
margin: $item-border-width * -1;
margin: $item-border-width * -1;
padding: $item-padding;
border-width: $item-border-width;
border-style: solid;
font-size: $item-font-size;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
h2 {
margin: 0 0 4px 0;
font-size: 16px;
@@ -175,21 +173,20 @@ button.item.item-complex {
}
.item-complex .item-content,
.item-radio .item-content {
@include transition(margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out);
/**
* The content area of a complex list item. This area can
* Slide left and right and be dragged to support different
* UI interactions.
*/
position: relative;
background-color: white;
z-index: 2;
padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
border: none;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
background-color: white;
}
.item-text-wrap,
@@ -350,6 +347,7 @@ button.item: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;
@@ -364,7 +362,6 @@ button.item:after {
font-family: 'Ionicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
// do not show the default right arrow when they want their own right side icon
@@ -484,7 +481,7 @@ button.item-button-right:after {
// -------------------------------
.item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out;
@include transition(transform 0.1s ease-in-out);
}
.item-reordering {
@@ -501,6 +498,8 @@ button.item-button-right:after {
* 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;
@@ -509,8 +508,6 @@ button.item-button-right:after {
height: 100%;
line-height: 100%;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
.button {
height: 100%;
.icon, i {
@@ -525,18 +522,18 @@ button.item-button-right:after {
}
&.ng-enter {
@include transition(left 0.2s ease-in-out, opacity 0.2s ease-in-out);
left: -48px;
opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
&.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;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
&.ng-leave-active {
left: -48px;