mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
flexbox mixins
This commit is contained in:
Adam Bradley
48
dist/css/ionic-ios7.css
vendored
48
dist/css/ionic-ios7.css
vendored
@ -1115,6 +1115,21 @@ a.list-item {
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.list-item-content h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
.list-item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px; }
|
||||
.list-item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px; }
|
||||
.list-item-content h4, .list-item-content h5, .list-item-content h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px; }
|
||||
.list-item-content p {
|
||||
color: #666;
|
||||
font-size: 14px; }
|
||||
.list-item-content h1:last-child,
|
||||
.list-item-content h2:last-child,
|
||||
.list-item-content h3:last-child,
|
||||
@ -1129,12 +1144,20 @@ a.list-item {
|
||||
white-space: normal; }
|
||||
|
||||
.list-item-content i {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
font-size: 28px;
|
||||
align-items: center; }
|
||||
font-size: 28px; }
|
||||
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: 45px; }
|
||||
@ -1150,10 +1173,19 @@ a.list-item {
|
||||
a .list-item-content:after,
|
||||
button .list-item-content:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 11px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
color: #ccc;
|
||||
content: "\e0fc";
|
||||
@ -1165,18 +1197,12 @@ button .list-item-content:after {
|
||||
font-family: 'ionicons';
|
||||
line-height: 1;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
align-items: center; }
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
a.list-icon-right .list-item-content:after,
|
||||
button.list-icon-right .list-item-content:after {
|
||||
display: none; }
|
||||
|
||||
.list-thumbnail h2,
|
||||
.list-thumbnail-lrg h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px; }
|
||||
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: 70px;
|
||||
min-height: 70px; }
|
||||
|
||||
47
dist/css/ionic-scoped.css
vendored
47
dist/css/ionic-scoped.css
vendored
@ -1832,6 +1832,21 @@
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.ionic .list-item-content h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
.ionic .list-item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px; }
|
||||
.ionic .list-item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px; }
|
||||
.ionic .list-item-content h4, .ionic .list-item-content h5, .ionic .list-item-content h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px; }
|
||||
.ionic .list-item-content p {
|
||||
color: #666;
|
||||
font-size: 14px; }
|
||||
.ionic .list-item-content h1:last-child,
|
||||
.ionic .list-item-content h2:last-child,
|
||||
.ionic .list-item-content h3:last-child,
|
||||
@ -1844,12 +1859,20 @@
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
.ionic .list-item-content i {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
font-size: 28px;
|
||||
align-items: center; }
|
||||
font-size: 28px; }
|
||||
.ionic .list-icon-left .list-item-content {
|
||||
padding-left: 45px; }
|
||||
.ionic .list-icon-left .list-item-content i {
|
||||
@ -1861,10 +1884,19 @@
|
||||
.ionic a .list-item-content:after,
|
||||
.ionic button .list-item-content:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 11px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
color: #ccc;
|
||||
content: "\e0fc";
|
||||
@ -1876,15 +1908,10 @@
|
||||
font-family: 'ionicons';
|
||||
line-height: 1;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
align-items: center; }
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
.ionic a.list-icon-right .list-item-content:after,
|
||||
.ionic button.list-icon-right .list-item-content:after {
|
||||
display: none; }
|
||||
.ionic .list-thumbnail h2,
|
||||
.ionic .list-thumbnail-lrg h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px; }
|
||||
.ionic .list-thumbnail .list-item-content {
|
||||
padding-left: 70px;
|
||||
min-height: 70px; }
|
||||
|
||||
48
dist/css/ionic.css
vendored
48
dist/css/ionic.css
vendored
@ -2258,6 +2258,21 @@ a.list-item {
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.list-item-content h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
.list-item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px; }
|
||||
.list-item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px; }
|
||||
.list-item-content h4, .list-item-content h5, .list-item-content h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px; }
|
||||
.list-item-content p {
|
||||
color: #666;
|
||||
font-size: 14px; }
|
||||
.list-item-content h1:last-child,
|
||||
.list-item-content h2:last-child,
|
||||
.list-item-content h3:last-child,
|
||||
@ -2272,12 +2287,20 @@ a.list-item {
|
||||
white-space: normal; }
|
||||
|
||||
.list-item-content i {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
font-size: 28px;
|
||||
align-items: center; }
|
||||
font-size: 28px; }
|
||||
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: 45px; }
|
||||
@ -2293,10 +2316,19 @@ a.list-item {
|
||||
a .list-item-content:after,
|
||||
button .list-item-content:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 11px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
color: #ccc;
|
||||
content: "\e0fc";
|
||||
@ -2308,18 +2340,12 @@ button .list-item-content:after {
|
||||
font-family: 'ionicons';
|
||||
line-height: 1;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
align-items: center; }
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
a.list-icon-right .list-item-content:after,
|
||||
button.list-icon-right .list-item-content:after {
|
||||
display: none; }
|
||||
|
||||
.list-thumbnail h2,
|
||||
.list-thumbnail-lrg h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px; }
|
||||
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: 70px;
|
||||
min-height: 70px; }
|
||||
|
||||
@ -114,6 +114,27 @@ a.list-item {
|
||||
|
||||
-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;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
h4, 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,
|
||||
@ -135,12 +156,13 @@ a.list-item {
|
||||
// -------------------------------
|
||||
|
||||
.list-item-content i {
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
font-size: $list-icon-font-size;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.list-icon-left .list-item-content {
|
||||
@ -162,10 +184,11 @@ a.list-item {
|
||||
a .list-item-content:after,
|
||||
button .list-item-content:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: $list-item-padding - 4;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
color: #ccc;
|
||||
content: "\e0fc"; // icon-chevron-right
|
||||
@ -178,7 +201,6 @@ button .list-item-content:after {
|
||||
line-height: 1;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// do not show the default right arrow when they want their own right side icon
|
||||
@ -193,12 +215,6 @@ button.list-icon-right {
|
||||
// List Thumbnails
|
||||
// -------------------------------
|
||||
|
||||
.list-thumbnail h2,
|
||||
.list-thumbnail-lrg h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: $list-thumbnail-width + ($list-item-padding * 2);
|
||||
min-height: $list-thumbnail-width + ($list-item-padding * 2);
|
||||
|
||||
@ -389,3 +389,75 @@
|
||||
-webkit-box-flex: $flex;
|
||||
-moz-box-flex: $flex;
|
||||
}
|
||||
|
||||
@mixin display-flex {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin dislay-inline {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@mixin flex-direction($value: row) {
|
||||
@if $value == row-reverse {
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-box-orient: horizontal;
|
||||
} @else if $value == column {
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
} @else if $value == column-reverse {
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-box-orient: vertical;
|
||||
} @else {
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
}
|
||||
-webkit-flex-direction: $value;
|
||||
-moz-flex-direction: $value;
|
||||
-ms-flex-direction: $value;
|
||||
flex-direction: $value;
|
||||
}
|
||||
|
||||
@mixin flex-wrap($value: nowrap) {
|
||||
// No Webkit Box fallback.
|
||||
-webkit-flex-wrap: $value;
|
||||
-moz-flex-wrap: $value;
|
||||
@if $value == nowrap {
|
||||
-ms-flex-wrap: none;
|
||||
} @else {
|
||||
-ms-flex-wrap: $value;
|
||||
}
|
||||
flex-wrap: $value;
|
||||
}
|
||||
|
||||
@mixin flex-flow($values: (row nowrap)) {
|
||||
// No Webkit Box fallback.
|
||||
-webkit-flex-flow: $values;
|
||||
-moz-flex-flow: $values;
|
||||
-ms-flex-flow: $values;
|
||||
flex-flow: $values;
|
||||
}
|
||||
|
||||
@mixin align-items($value: stretch) {
|
||||
@if $value == flex-start {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
} @else if $value == flex-end {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
} @else {
|
||||
-webkit-box-align: $value;
|
||||
-ms-flex-align: $value;
|
||||
}
|
||||
-webkit-align-items: $value;
|
||||
-moz-align-items: $value;
|
||||
align-items: $value;
|
||||
}
|
||||
Reference in New Issue
Block a user