javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

thumbnail margin

Browse Source
This commit is contained in:
Adam Bradley
2013-11-01 09:02:24 -05:00
parent 5c2f1ae0ab
commit 1f91f4a0bb
6 changed files with 295 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
dist/css/ionic-ios7.css vendored
View File

@ -182,7 +182,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -646,9 +646,12 @@ a.subdued‎ {
.bar .title a { .bar .title a {
color: inherit; } color: inherit; }
.bar > .button { .bar > .button {
box-flex: 1;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-webkit-flex: 0;
-moz-box-flex: 0; -moz-box-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
flex: 0;
z-index: 1; z-index: 1;
margin: 0; margin: 0;
padding: 2px 8px 0 8px; padding: 2px 8px 0 8px;
@ -835,9 +838,17 @@ a.subdued‎ {
* A navigation bar with any number of tab items supported. * A navigation bar with any number of tab items supported.
*/ */
.tabs { .tabs {
box-orient: horizontal; display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-moz-box-orient: horizontal; -webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal;
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
@ -845,8 +856,6 @@ a.subdued‎ {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
display: -webkit-box;
display: box;
width: 100%; width: 100%;
height: 49px; height: 49px;
border-style: solid; border-style: solid;
@ -906,13 +915,16 @@ a.subdued‎ {
top: 44px; } top: 44px; }
.tab-item { .tab-item {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; -moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: inline-block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
width: 0; margin: auto;
height: 100%; height: 100%;
color: inherit; color: inherit;
text-align: center; text-align: center;
@ -970,6 +982,16 @@ a.subdued‎ {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; } color: #444444; }
.item.tabs {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 0; }
.item.tabs i, .item.tabs .icon {
position: relative; }
.menu { .menu {
position: absolute; position: absolute;
top: 0; top: 0;
@ -1273,23 +1295,23 @@ button.item-icon-right:after {
border-radius: 4px; } border-radius: 4px; }
.item-thumbnail-left { .item-thumbnail-left {
padding-left: 95px; padding-left: 105px;
min-height: 80px; } min-height: 100px; }
.item-thumbnail-left img:first-child, .item-thumbnail-left .item-image { .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 0; left: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
.item-thumbnail-right { .item-thumbnail-right {
padding-right: 95px; padding-right: 105px;
min-height: 80px; } min-height: 100px; }
.item-thumbnail-right img:first-child, .item-thumbnail-right .item-image { .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
@ -1663,7 +1685,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],
@ -1735,7 +1757,7 @@ input[type="checkbox"][readonly] {
right: 20px; right: 20px;
transition: 0.2s ease; transition: 0.2s ease;
transition-property: left, right; transition-property: left, right;
transition-delay: 0s, 0.05s; } transition-delay: 0s, .05s; }
.toggle :checked + .track { .toggle :checked + .track {
/* When the toggle is "on" */ /* When the toggle is "on" */
@ -1750,7 +1772,7 @@ input[type="checkbox"][readonly] {
right: 0; right: 0;
left: 20px; left: 20px;
-webkit-transform: none; -webkit-transform: none;
transition-delay: 0.05s, 0s; } transition-delay: .05s, 0s; }
.item-radio { .item-radio {
padding: 0; } padding: 0; }
@ -2034,7 +2056,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active { .button.button-icon:active, .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full { .button.block, .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
@ -2076,29 +2098,41 @@ a.button {
text-decoration: none; } text-decoration: none; }
.button-bar { .button-bar {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; } display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal; }
.button-bar > .button { .button-bar > .button {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 0 16px;
width: 0; width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
line-height: 15px; } line-height: 13px; }
.button-bar > .button:first-child { .button-bar > .button:first-child {
border-radius: 2px 0px 0px 2px; } border-radius: 2px 0px 0px 2px; }
.button-bar > .button:last-child { .button-bar > .button:last-child {
@ -2106,14 +2140,23 @@ a.button {
border-radius: 0px 2px 2px 0px; } border-radius: 0px 2px 2px 0px; }
.buttons { .buttons {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; } display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal; }
.badge { .badge {
display: inline-block; display: inline-block;
@ -2392,9 +2435,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-loading:before { .icon-loading:before {
content: "\e144"; } content: "\e144"; }
@ -2407,9 +2450,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-refreshing:before { .icon-refreshing:before {
content: "\e144"; } content: "\e144"; }

132
dist/css/ionic-scoped.css vendored
View File

@ -1195,7 +1195,7 @@
.ionic fieldset { .ionic fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
.ionic legend { .ionic legend {
padding: 0; padding: 0;
/* 2 */ /* 2 */
@ -1579,9 +1579,12 @@
.ionic .bar .title a { .ionic .bar .title a {
color: inherit; } color: inherit; }
.ionic .bar > .button { .ionic .bar > .button {
box-flex: 1;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-webkit-flex: 0;
-moz-box-flex: 0; -moz-box-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
flex: 0;
z-index: 1; z-index: 1;
margin: 0; margin: 0;
padding: 2px 8px 0 8px; padding: 2px 8px 0 8px;
@ -1749,9 +1752,17 @@
bottom: 44px; bottom: 44px;
display: block; } display: block; }
.ionic .tabs { .ionic .tabs {
box-orient: horizontal; display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-moz-box-orient: horizontal; -webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal;
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
@ -1759,8 +1770,6 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
display: -webkit-box;
display: box;
width: 100%; width: 100%;
height: 49px; height: 49px;
border-style: solid; border-style: solid;
@ -1818,13 +1827,16 @@
.ionic .tabs-top { .ionic .tabs-top {
top: 44px; } top: 44px; }
.ionic .tab-item { .ionic .tab-item {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; -moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: inline-block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
width: 0; margin: auto;
height: 100%; height: 100%;
color: inherit; color: inherit;
text-align: center; text-align: center;
@ -1874,6 +1886,15 @@
color: #f0b840; } color: #f0b840; }
.ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark { .ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark {
color: #444444; } color: #444444; }
.ionic .item.tabs {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 0; }
.ionic .item.tabs i, .ionic .item.tabs .icon {
position: relative; }
.ionic .menu { .ionic .menu {
position: absolute; position: absolute;
top: 0; top: 0;
@ -2151,22 +2172,22 @@
width: 100%; width: 100%;
border-radius: 4px; } border-radius: 4px; }
.ionic .item-thumbnail-left { .ionic .item-thumbnail-left {
padding-left: 95px; padding-left: 105px;
min-height: 80px; } min-height: 100px; }
.ionic .item-thumbnail-left img:first-child, .ionic .item-thumbnail-left .item-image { .ionic .item-thumbnail-left img:first-child, .ionic .item-thumbnail-left .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 0; left: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
.ionic .item-thumbnail-right { .ionic .item-thumbnail-right {
padding-right: 95px; padding-right: 105px;
min-height: 80px; } min-height: 100px; }
.ionic .item-thumbnail-right img:first-child, .ionic .item-thumbnail-right .item-image { .ionic .item-thumbnail-right img:first-child, .ionic .item-thumbnail-right .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
@ -2487,7 +2508,7 @@
.ionic input[type="file"] { .ionic input[type="file"] {
line-height: 34px; } line-height: 34px; }
.ionic select { .ionic select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
.ionic select[multiple], .ionic select[multiple],
.ionic select[size] { .ionic select[size] {
@ -2536,7 +2557,7 @@
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
.ionic .checkbox input:after { .ionic .checkbox input:after {
position: absolute; position: absolute;
top: 34%; top: 34%;
@ -2549,7 +2570,7 @@
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
.ionic .checkbox input:checked:before { .ionic .checkbox input:checked:before {
@ -2900,7 +2921,7 @@
.ionic .button.button-icon:active, .ionic .button.button-icon.active { .ionic .button.button-icon:active, .ionic .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.ionic .button.block, .ionic .button.button-full { .ionic .button.block, .ionic .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
@ -2935,42 +2956,63 @@
.ionic a.button { .ionic a.button {
text-decoration: none; } text-decoration: none; }
.ionic .button-bar { .ionic .button-bar {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; } display: -webkit-flex;
.ionic .button-bar > .button { display: -moz-flex;
box-flex: 1; display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal; }
.ionic .button-bar > .button {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 0 16px;
width: 0; width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
line-height: 15px; } line-height: 13px; }
.ionic .button-bar > .button:first-child { .ionic .button-bar > .button:first-child {
border-radius: 2px 0px 0px 2px; } border-radius: 2px 0px 0px 2px; }
.ionic .button-bar > .button:last-child { .ionic .button-bar > .button:last-child {
border-right-width: 1px; border-right-width: 1px;
border-radius: 0px 2px 2px 0px; } border-radius: 0px 2px 2px 0px; }
.ionic .buttons { .ionic .buttons {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; } display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal; }
.ionic .badge { .ionic .badge {
display: inline-block; display: inline-block;
min-width: 10px; min-width: 10px;
@ -3166,9 +3208,9 @@
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ionic .icon-loading:before { .ionic .icon-loading:before {
content: "\e144"; } content: "\e144"; }
.ionic .icon-refreshing { .ionic .icon-refreshing {
@ -3180,9 +3222,9 @@
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ionic .icon-refreshing:before { .ionic .icon-refreshing:before {
content: "\e144"; } content: "\e144"; }
.ionic .hidden, .ionic .hidden,

131
dist/css/ionic.css vendored
View File

@ -1521,7 +1521,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -2015,9 +2015,12 @@ a.subdued‎ {
.bar .title a { .bar .title a {
color: inherit; } color: inherit; }
.bar > .button { .bar > .button {
box-flex: 1;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-webkit-flex: 0;
-moz-box-flex: 0; -moz-box-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
flex: 0;
z-index: 1; z-index: 1;
margin: 0; margin: 0;
padding: 2px 8px 0 8px; padding: 2px 8px 0 8px;
@ -2204,9 +2207,17 @@ a.subdued‎ {
* A navigation bar with any number of tab items supported. * A navigation bar with any number of tab items supported.
*/ */
.tabs { .tabs {
box-orient: horizontal; display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-moz-box-orient: horizontal; -webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal;
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
@ -2214,8 +2225,6 @@ a.subdued‎ {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
display: -webkit-box;
display: box;
width: 100%; width: 100%;
height: 49px; height: 49px;
border-style: solid; border-style: solid;
@ -2275,13 +2284,16 @@ a.subdued‎ {
top: 44px; } top: 44px; }
.tab-item { .tab-item {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; -moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: inline-block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
width: 0; margin: auto;
height: 100%; height: 100%;
color: inherit; color: inherit;
text-align: center; text-align: center;
@ -2339,6 +2351,16 @@ a.subdued‎ {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; } color: #444444; }
.item.tabs {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 0; }
.item.tabs i, .item.tabs .icon {
position: relative; }
.menu { .menu {
position: absolute; position: absolute;
top: 0; top: 0;
@ -2676,23 +2698,23 @@ button.item-icon-right:after {
border-radius: 4px; } border-radius: 4px; }
.item-thumbnail-left { .item-thumbnail-left {
padding-left: 95px; padding-left: 105px;
min-height: 80px; } min-height: 100px; }
.item-thumbnail-left img:first-child, .item-thumbnail-left .item-image { .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 0; left: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
.item-thumbnail-right { .item-thumbnail-right {
padding-right: 95px; padding-right: 105px;
min-height: 80px; } min-height: 100px; }
.item-thumbnail-right img:first-child, .item-thumbnail-right .item-image { .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
@ -3066,7 +3088,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],
@ -3121,7 +3143,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
/* the checkmark within the box */ /* the checkmark within the box */
.checkbox input:after { .checkbox input:after {
@ -3136,7 +3158,7 @@ input[type="checkbox"][readonly] {
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
@ -3515,7 +3537,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active { .button.button-icon:active, .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full { .button.block, .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
@ -3557,29 +3579,41 @@ a.button {
text-decoration: none; } text-decoration: none; }
.button-bar { .button-bar {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; } display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal; }
.button-bar > .button { .button-bar > .button {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 0 16px;
width: 0; width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
line-height: 15px; } line-height: 13px; }
.button-bar > .button:first-child { .button-bar > .button:first-child {
border-radius: 2px 0px 0px 2px; } border-radius: 2px 0px 0px 2px; }
.button-bar > .button:last-child { .button-bar > .button:last-child {
@ -3587,14 +3621,23 @@ a.button {
border-radius: 0px 2px 2px 0px; } border-radius: 0px 2px 2px 0px; }
.buttons { .buttons {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; } display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal; }
.badge { .badge {
display: inline-block; display: inline-block;
@ -3978,9 +4021,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-loading:before { .icon-loading:before {
content: "\e144"; } content: "\e144"; }
@ -3993,9 +4036,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-refreshing:before { .icon-refreshing:before {
content: "\e144"; } content: "\e144"; }

16
scss/ionic/_items.scss
View File

@ -275,13 +275,13 @@ button.item-icon-right:after {
// ------------------------------- // -------------------------------
.item-thumbnail-left { .item-thumbnail-left {
padding-left: $item-thumbnail-width + $item-padding; padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
min-height: $item-thumbnail-height; min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
img:first-child, .item-image { img:first-child, .item-image {
position: absolute; position: absolute;
top: 0; top: $item-thumbnail-margin;
left: 0; left: $item-thumbnail-margin;
max-width: $item-thumbnail-width; max-width: $item-thumbnail-width;
max-height: $item-thumbnail-height; max-height: $item-thumbnail-height;
width: 100%; width: 100%;
@ -289,13 +289,13 @@ button.item-icon-right:after {
} }
.item-thumbnail-right { .item-thumbnail-right {
padding-right: $item-thumbnail-width + $item-padding; padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
min-height: $item-thumbnail-height; min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
img:first-child, .item-image { img:first-child, .item-image {
position: absolute; position: absolute;
top: 0; top: $item-thumbnail-margin;
right: 0; right: $item-thumbnail-margin;
max-width: $item-thumbnail-width; max-width: $item-thumbnail-width;
max-height: $item-thumbnail-height; max-height: $item-thumbnail-height;
width: 100%; width: 100%;

1
scss/ionic/_variables.scss
View File

@ -411,6 +411,7 @@ $item-avitar-height: 40px !default;
$item-thumbnail-width: 80px !default; $item-thumbnail-width: 80px !default;
$item-thumbnail-height: 80px !default; $item-thumbnail-height: 80px !default;
$item-thumbnail-margin: 10px !default;
// Icons // Icons

27
test/cards.html
View File

@ -95,6 +95,18 @@
<p>November 05, 1955</p> <p>November 05, 1955</p>
</div> </div>
<div class="item item-thumbnail-left">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-right">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body"> <div class="item item-body">
<img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg"> <img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
<p> <p>
@ -108,8 +120,19 @@
</p> </p>
</div> </div>
<div class="item item-divider"> <div class="item tabs tabs-icon-left">
Like Comment Share <a class="tab-item">
<i class="icon-home"></i>
Like
</a>
<a class="tab-item">
<i class="icon-star"></i>
Comment
</a>
<a class="tab-item">
<i class="icon-gear-a"></i>
Share
</a>
</div> </div>
</div> </div>