From 41147a4f9816b02957c6ee656ad9f6f06eaf5dd0 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 18 Oct 2013 12:27:41 -0500 Subject: [PATCH] list items and icons --- dist/css/ionic-ios7.css | 203 ++++++++++++++++++----- dist/css/ionic-scoped.css | 174 +++++++++++++++----- dist/css/ionic.css | 203 ++++++++++++++++++----- scss/ionic-ios7/ionic-ios7.scss | 1 + scss/ionic/_icons.scss | 62 +++++++ scss/ionic/_listview.scss | 79 ++++++--- scss/ionic/_radio.scss | 11 +- scss/ionic/_util.scss | 79 +++++---- scss/ionic/_variables.scss | 17 +- scss/ionic/ionic-scoped.scss | 1 + scss/ionic/ionic.scss | 1 + test/input-checkbox.html | 4 + test/input-radio.html | 4 +- test/lists.html | 279 +++++++++++++++++++++++--------- 14 files changed, 859 insertions(+), 259 deletions(-) create mode 100644 scss/ionic/_icons.scss diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index ae90ff896e..40d50d5ed7 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -963,15 +963,17 @@ address { position: relative; display: block; margin-bottom: -1px; + border-top: 1px solid #dddddd; z-index: 2; background-color: white; - border: 1px solid #dddddd; } + /* // Align icons to the right + > i:last-child { + float: right; + }*/ } .list-item:last-child { margin-bottom: 0; } .list-item > .badge { float: right; } - .list-item > i:last-child { - float: right; } .list-item > .badge + .badge { margin-right: 5px; } .list-item.active, .list-item.active:hover, .list-item.active:focus { @@ -1108,15 +1110,67 @@ a.list-item { .list-item-content { position: relative; background-color: #fff; + border: 1px solid #dddddd; z-index: 2; + margin-top: -1px; padding: 15px; - -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 > i:last-child { - float: right; } - .list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child { - float: right; } - .list-item-content > .toggle:last-child { - margin-top: -5px; } + -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; + /* // Align icons + > i:first-child { + float: left; + } + > i:last-child { + float: right; + } + + // Make every last form element go to the right of the item + + > .toggle:last-child, input:last-child, > button:last-child { + float: right; + } + > .toggle:last-child { + margin-top: -5px; + }*/ } + +/** + * Left-side icon + */ +.list-icon-left .list-item-content { + padding-left: 60px; } + +/** + * Right-side icon + */ +.list-icon-right .list-item-content { + padding-right: 60px; } + +.align-icon-left, .align-icon-right { + position: absolute; + top: 11px; + z-index: 3; + width: 32px; + height: 32px; + font-size: 28px; } + +.align-icon-left { + left: 12px; } + .align-icon-left:after { + position: absolute; + width: 56px; + height: 4px; + left: -12px; + top: -13px; + background: white; + content: ' '; } + +.list-item:first-child .align-icon-left:after { + display: none; } + +.item-opened .align-icon-left:after { + display: none; } + +.align-icon-right { + right: 12px; } .list-item-sliding { -webkit-transition: -webkit-transform 0.1s ease-in-out; } @@ -1188,18 +1242,6 @@ a.list-item { border-radius: 0; border: none; } -/** - * Right-side icon that reused by components like radio buttons - */ -.list-item-icon { - position: absolute; - top: 0; - right: 0; - z-index: 3; - padding: 13px; - height: 100%; - font-size: 24px; } - /** * A list divider. */ @@ -1521,9 +1563,16 @@ input[type="checkbox"][readonly] { /* give some room to the right for the checkmark icon */ padding-right: 60px; } -.radio-buttton-list .list-item-icon { +.radio-buttton-list .radio-button-icon { /* checkmark icon will be hidden by default */ - visibility: hidden; } + position: absolute; + top: 0; + right: 0; + z-index: 3; + visibility: hidden; + padding: 13px; + height: 100%; + font-size: 24px; } .radio-buttton-list input[type="radio"] { /* hide any radio button inputs elements (the ugly circles) */ @@ -1531,7 +1580,7 @@ input[type="checkbox"][readonly] { .radio-buttton-list input[type="radio"]:checked ~ .list-item-content { /* style the list item content when its checked */ background: #f7f7f7; } - .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon { + .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon { /* show the checkmark icon when its checked */ visibility: visible; } @@ -1977,6 +2026,46 @@ a.button { animation: fadein 0.5s; -webkit-animation: fadein 0.5s; } +.fill-icon { + background: black; + color: white !important; + border-radius: 6px; } + .fill-icon.align-icon-left, .fill-icon.align-icon-right { + position: absolute; + z-index: 3; + padding: 4px 3px; + width: 30px; + height: 31px; + font-size: 24px; } + .fill-icon.brand-default { + background: white; } + .fill-icon.brand-secondary { + background: whitesmoke; } + .fill-icon.brand-primary { + background: #4a87ee; } + .fill-icon.brand-info { + background: #43cee6; } + .fill-icon.brand-success { + background: #66cc33; } + .fill-icon.brand-warning { + background: #f0b840; } + .fill-icon.brand-danger { + background: #ef4e3a; } + .fill-icon.brand-dark { + background: #444444; } + .fill-icon.gray-darker { + background: #222222; } + .fill-icon.gray-dark { + background: #333333; } + .fill-icon.gray { + background: #555555; } + .fill-icon.gray-light { + background: #999999; } + .fill-icon.gray-lighter { + background: #eeeeee; } + .fill-icon.white { + background: white; } + .hidden, .hide { display: none !important; } @@ -2016,24 +2105,50 @@ a.button { .padding-horizontal { padding-left: 10px; } -.margin { - margin: 10px; } - -.margin-top, -.margin-vertical { - margin-top: 10px; } - -.margin-right, -.margin-horizontal { - margin-right: 10px; } - -.margin-bottom, -.margin-vertical { - margin-bottom: 10px; } - -.margin-left, -.margin-horizontal { - margin-left: 10px; } - .rounded { border-radius: 4px; } + +.brand-default { + color: white; } + +.brand-secondary { + color: whitesmoke; } + +.brand-primary { + color: #4a87ee; } + +.brand-info { + color: #43cee6; } + +.brand-success { + color: #66cc33; } + +.brand-warning { + color: #f0b840; } + +.brand-danger { + color: #ef4e3a; } + +.brand-dark { + color: #444444; } + +.black { + color: black; } + +.gray-darker { + color: #222222; } + +.gray-dark { + color: #333333; } + +.gray { + color: #555555; } + +.gray-light { + color: #999999; } + +.gray-lighter { + color: #eeeeee; } + +.white { + color: white; } diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index cf0d388c7a..5b10536399 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -160,6 +160,12 @@ * Slide left and right and be dragged to support different * UI interactions. */ + /** + * Left-side icon + */ + /** + * Right-side icon + */ /** * The left-side edit area of a complex list item. This area shows * whe the list item is in edit mode. @@ -168,9 +174,6 @@ * The hidden right-side buttons that can be exposed under a list item * with dragging. */ - /** - * Right-side icon that reused by components like radio buttons - */ /** * A list divider. */ @@ -1674,15 +1677,17 @@ position: relative; display: block; margin-bottom: -1px; + border-top: 1px solid #dddddd; z-index: 2; background-color: white; - border: 1px solid #dddddd; } + /* // Align icons to the right + > i:last-child { + float: right; + }*/ } .ionic .list-item:last-child { margin-bottom: 0; } .ionic .list-item > .badge { float: right; } - .ionic .list-item > i:last-child { - float: right; } .ionic .list-item > .badge + .badge { margin-right: 5px; } .ionic .list-item.active, .ionic .list-item.active:hover, .ionic .list-item.active:focus { @@ -1807,15 +1812,54 @@ .ionic .list-item-content { position: relative; background-color: #fff; + border: 1px solid #dddddd; z-index: 2; + margin-top: -1px; padding: 15px; - -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 > i:last-child { - float: right; } - .ionic .list-item-content > .toggle:last-child, .ionic .list-item-content input:last-child, .ionic .list-item-content > button:last-child { - float: right; } - .ionic .list-item-content > .toggle:last-child { - margin-top: -5px; } + -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; + /* // Align icons + > i:first-child { + float: left; + } + > i:last-child { + float: right; + } + + // Make every last form element go to the right of the item + + > .toggle:last-child, input:last-child, > button:last-child { + float: right; + } + > .toggle:last-child { + margin-top: -5px; + }*/ } + .ionic .list-icon-left .list-item-content { + padding-left: 60px; } + .ionic .list-icon-right .list-item-content { + padding-right: 60px; } + .ionic .align-icon-left, .ionic .align-icon-right { + position: absolute; + top: 11px; + z-index: 3; + width: 32px; + height: 32px; + font-size: 28px; } + .ionic .align-icon-left { + left: 12px; } + .ionic .align-icon-left:after { + position: absolute; + width: 56px; + height: 4px; + left: -12px; + top: -13px; + background: white; + content: ' '; } + .ionic .list-item:first-child .align-icon-left:after { + display: none; } + .ionic .item-opened .align-icon-left:after { + display: none; } + .ionic .align-icon-right { + right: 12px; } .ionic .list-item-sliding { -webkit-transition: -webkit-transform 0.1s ease-in-out; } .ionic .list-item-reordering { @@ -1872,14 +1916,6 @@ height: 100%; border-radius: 0; border: none; } - .ionic .list-item-icon { - position: absolute; - top: 0; - right: 0; - z-index: 3; - padding: 13px; - height: 100%; - font-size: 24px; } .ionic .list-divider { padding: 5px 15px; background-color: whitesmoke; @@ -2214,16 +2250,23 @@ .ionic .radio-buttton-list .list-item-content { /* give some room to the right for the checkmark icon */ padding-right: 60px; } - .ionic .radio-buttton-list .list-item-icon { + .ionic .radio-buttton-list .radio-button-icon { /* checkmark icon will be hidden by default */ - visibility: hidden; } + position: absolute; + top: 0; + right: 0; + z-index: 3; + visibility: hidden; + padding: 13px; + height: 100%; + font-size: 24px; } .ionic .radio-buttton-list input[type="radio"] { /* hide any radio button inputs elements (the ugly circles) */ display: none; } .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-content { /* style the list item content when its checked */ background: #f7f7f7; } - .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon { + .ionic .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon { /* show the checkmark icon when its checked */ visibility: visible; } .ionic input[type="range"] { @@ -2623,6 +2666,45 @@ opacity: 0; animation: fadein 0.5s; -webkit-animation: fadein 0.5s; } + .ionic .fill-icon { + background: black; + color: white !important; + border-radius: 6px; } + .ionic .fill-icon.align-icon-left, .ionic .fill-icon.align-icon-right { + position: absolute; + z-index: 3; + padding: 4px 3px; + width: 30px; + height: 31px; + font-size: 24px; } + .ionic .fill-icon.brand-default { + background: white; } + .ionic .fill-icon.brand-secondary { + background: whitesmoke; } + .ionic .fill-icon.brand-primary { + background: #4a87ee; } + .ionic .fill-icon.brand-info { + background: #43cee6; } + .ionic .fill-icon.brand-success { + background: #66cc33; } + .ionic .fill-icon.brand-warning { + background: #f0b840; } + .ionic .fill-icon.brand-danger { + background: #ef4e3a; } + .ionic .fill-icon.brand-dark { + background: #444444; } + .ionic .fill-icon.gray-darker { + background: #222222; } + .ionic .fill-icon.gray-dark { + background: #333333; } + .ionic .fill-icon.gray { + background: #555555; } + .ionic .fill-icon.gray-light { + background: #999999; } + .ionic .fill-icon.gray-lighter { + background: #eeeeee; } + .ionic .fill-icon.white { + background: white; } .ionic .hidden, .ionic .hide { display: none !important; } @@ -2653,22 +2735,38 @@ .ionic .padding-left, .ionic .padding-horizontal { padding-left: 10px; } - .ionic .margin { - margin: 10px; } - .ionic .margin-top, - .ionic .margin-vertical { - margin-top: 10px; } - .ionic .margin-right, - .ionic .margin-horizontal { - margin-right: 10px; } - .ionic .margin-bottom, - .ionic .margin-vertical { - margin-bottom: 10px; } - .ionic .margin-left, - .ionic .margin-horizontal { - margin-left: 10px; } .ionic .rounded { border-radius: 4px; } + .ionic .brand-default { + color: white; } + .ionic .brand-secondary { + color: whitesmoke; } + .ionic .brand-primary { + color: #4a87ee; } + .ionic .brand-info { + color: #43cee6; } + .ionic .brand-success { + color: #66cc33; } + .ionic .brand-warning { + color: #f0b840; } + .ionic .brand-danger { + color: #ef4e3a; } + .ionic .brand-dark { + color: #444444; } + .ionic .black { + color: black; } + .ionic .gray-darker { + color: #222222; } + .ionic .gray-dark { + color: #333333; } + .ionic .gray { + color: #555555; } + .ionic .gray-light { + color: #999999; } + .ionic .gray-lighter { + color: #eeeeee; } + .ionic .white { + color: white; } .ionic .platform-ios7 .bar-header { height: 64px; } .ionic .platform-ios7 .bar-header > * { diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 88818109de..f20819d511 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2072,15 +2072,17 @@ address { position: relative; display: block; margin-bottom: -1px; + border-top: 1px solid #dddddd; z-index: 2; background-color: white; - border: 1px solid #dddddd; } + /* // Align icons to the right + > i:last-child { + float: right; + }*/ } .list-item:last-child { margin-bottom: 0; } .list-item > .badge { float: right; } - .list-item > i:last-child { - float: right; } .list-item > .badge + .badge { margin-right: 5px; } .list-item.active, .list-item.active:hover, .list-item.active:focus { @@ -2217,15 +2219,67 @@ a.list-item { .list-item-content { position: relative; background-color: #fff; + border: 1px solid #dddddd; z-index: 2; + margin-top: -1px; padding: 15px; - -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 > i:last-child { - float: right; } - .list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child { - float: right; } - .list-item-content > .toggle:last-child { - margin-top: -5px; } + -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; + /* // Align icons + > i:first-child { + float: left; + } + > i:last-child { + float: right; + } + + // Make every last form element go to the right of the item + + > .toggle:last-child, input:last-child, > button:last-child { + float: right; + } + > .toggle:last-child { + margin-top: -5px; + }*/ } + +/** + * Left-side icon + */ +.list-icon-left .list-item-content { + padding-left: 60px; } + +/** + * Right-side icon + */ +.list-icon-right .list-item-content { + padding-right: 60px; } + +.align-icon-left, .align-icon-right { + position: absolute; + top: 11px; + z-index: 3; + width: 32px; + height: 32px; + font-size: 28px; } + +.align-icon-left { + left: 12px; } + .align-icon-left:after { + position: absolute; + width: 56px; + height: 4px; + left: -12px; + top: -13px; + background: white; + content: ' '; } + +.list-item:first-child .align-icon-left:after { + display: none; } + +.item-opened .align-icon-left:after { + display: none; } + +.align-icon-right { + right: 12px; } .list-item-sliding { -webkit-transition: -webkit-transform 0.1s ease-in-out; } @@ -2297,18 +2351,6 @@ a.list-item { border-radius: 0; border: none; } -/** - * Right-side icon that reused by components like radio buttons - */ -.list-item-icon { - position: absolute; - top: 0; - right: 0; - z-index: 3; - padding: 13px; - height: 100%; - font-size: 24px; } - /** * A list divider. */ @@ -2705,9 +2747,16 @@ input[type="checkbox"][readonly] { /* give some room to the right for the checkmark icon */ padding-right: 60px; } -.radio-buttton-list .list-item-icon { +.radio-buttton-list .radio-button-icon { /* checkmark icon will be hidden by default */ - visibility: hidden; } + position: absolute; + top: 0; + right: 0; + z-index: 3; + visibility: hidden; + padding: 13px; + height: 100%; + font-size: 24px; } .radio-buttton-list input[type="radio"] { /* hide any radio button inputs elements (the ugly circles) */ @@ -2715,7 +2764,7 @@ input[type="checkbox"][readonly] { .radio-buttton-list input[type="radio"]:checked ~ .list-item-content { /* style the list item content when its checked */ background: #f7f7f7; } - .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon { + .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon { /* show the checkmark icon when its checked */ visibility: visible; } @@ -3198,6 +3247,46 @@ a.button { animation: fadein 0.5s; -webkit-animation: fadein 0.5s; } +.fill-icon { + background: black; + color: white !important; + border-radius: 6px; } + .fill-icon.align-icon-left, .fill-icon.align-icon-right { + position: absolute; + z-index: 3; + padding: 4px 3px; + width: 30px; + height: 31px; + font-size: 24px; } + .fill-icon.brand-default { + background: white; } + .fill-icon.brand-secondary { + background: whitesmoke; } + .fill-icon.brand-primary { + background: #4a87ee; } + .fill-icon.brand-info { + background: #43cee6; } + .fill-icon.brand-success { + background: #66cc33; } + .fill-icon.brand-warning { + background: #f0b840; } + .fill-icon.brand-danger { + background: #ef4e3a; } + .fill-icon.brand-dark { + background: #444444; } + .fill-icon.gray-darker { + background: #222222; } + .fill-icon.gray-dark { + background: #333333; } + .fill-icon.gray { + background: #555555; } + .fill-icon.gray-light { + background: #999999; } + .fill-icon.gray-lighter { + background: #eeeeee; } + .fill-icon.white { + background: white; } + .hidden, .hide { display: none !important; } @@ -3237,28 +3326,54 @@ a.button { .padding-horizontal { padding-left: 10px; } -.margin { - margin: 10px; } - -.margin-top, -.margin-vertical { - margin-top: 10px; } - -.margin-right, -.margin-horizontal { - margin-right: 10px; } - -.margin-bottom, -.margin-vertical { - margin-bottom: 10px; } - -.margin-left, -.margin-horizontal { - margin-left: 10px; } - .rounded { border-radius: 4px; } +.brand-default { + color: white; } + +.brand-secondary { + color: whitesmoke; } + +.brand-primary { + color: #4a87ee; } + +.brand-info { + color: #43cee6; } + +.brand-success { + color: #66cc33; } + +.brand-warning { + color: #f0b840; } + +.brand-danger { + color: #ef4e3a; } + +.brand-dark { + color: #444444; } + +.black { + color: black; } + +.gray-darker { + color: #222222; } + +.gray-dark { + color: #333333; } + +.gray { + color: #555555; } + +.gray-light { + color: #999999; } + +.gray-lighter { + color: #eeeeee; } + +.white { + color: white; } + .platform-ios7 .bar-header { height: 64px; } .platform-ios7 .bar-header > * { diff --git a/scss/ionic-ios7/ionic-ios7.scss b/scss/ionic-ios7/ionic-ios7.scss index 51df0467f3..727ba97d55 100644 --- a/scss/ionic-ios7/ionic-ios7.scss +++ b/scss/ionic-ios7/ionic-ios7.scss @@ -39,4 +39,5 @@ "../ionic/animations", // Util + "../ionic/icons", "../ionic/util"; diff --git a/scss/ionic/_icons.scss b/scss/ionic/_icons.scss new file mode 100644 index 0000000000..cb6cbb4fe1 --- /dev/null +++ b/scss/ionic/_icons.scss @@ -0,0 +1,62 @@ + + +.fill-icon { + background: black; + color: white !important; + border-radius: $icon-fill-border-radius; + + &.align-icon-left, + &.align-icon-right { + position: absolute; + z-index: 3; + padding: 4px 3px; + width: $icon-font-size + 2; + height: $icon-font-size + 3; + font-size: $icon-font-size - 4; + } + + &.brand-default { + background: $brand-default; + } + &.brand-secondary { + background: $brand-secondary; + } + &.brand-primary { + background: $brand-primary; + } + &.brand-info { + background: $brand-info; + } + &.brand-success { + background: $brand-success; + } + &.brand-warning { + background: $brand-warning; + } + &.brand-danger { + background: $brand-danger; + } + &.brand-dark { + background: $brand-dark; + } + + &.gray-darker { + background: $gray-darker; + } + &.gray-dark { + background: $gray-dark; + } + &.gray { + background: $gray; + } + &.gray-light { + background: $gray-light; + } + &.gray-lighter { + background: $gray-lighter; + } + &.white { + background: $white; + } + +} \ No newline at end of file diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss index ee7e26954e..2e48f8ffb8 100644 --- a/scss/ionic/_listview.scss +++ b/scss/ionic/_listview.scss @@ -19,14 +19,14 @@ position: relative; display: block; // Place the border on the list items and negative margin up for better styling - margin-bottom: -1px; + margin-bottom: $list-item-border-width * -1; + border-top: $list-item-border-width solid $list-item-border-color; // Make sure the borders and stuff don't get hidden // by children z-index: 2; background-color: $list-default-background; - border: $list-item-border; // Round the first and last items &:first-child { @@ -42,10 +42,10 @@ float: right; } - // Align icons to the right +/* // Align icons to the right > i:last-child { float: right; - } + }*/ > .badge + .badge { margin-right: 5px; @@ -119,16 +119,19 @@ a.list-item { */ .list-item-content { position: relative; - background-color: #fff; + border: $list-item-border-width solid $list-item-border-color; z-index: 2; - + margin-top: $list-item-border-width * -1; padding: $list-item-padding; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; - // Align icons to the right +/* // Align icons + > i:first-child { + float: left; + } > i:last-child { float: right; } @@ -140,8 +143,56 @@ a.list-item { } > .toggle:last-child { margin-top: -5px; + }*/ +} + +/** + * Left-side icon + */ +.list-icon-left .list-item-content { + padding-left: $list-item-padding * 4; +} + +/** + * Right-side icon + */ +.list-icon-right .list-item-content { + padding-right: $list-item-padding * 4; +} + +.align-icon-left, .align-icon-right { + position: absolute; + top: $list-item-padding - 4; + z-index: 3; + width: $icon-font-size + 4; + height: $icon-font-size + 4; + font-size: $icon-font-size; +} + +.align-icon-left { + left: ($list-item-padding - 3); + + &:after { + position: absolute; + width: $icon-font-size * 2; + height: 4px; + left: ($list-item-padding - 3) * -1; + top: ($list-item-padding * -1) + 2; + background: $list-default-background; + content: ' '; } } +.list-item:first-child .align-icon-left:after { + display: none; +} + +.item-opened .align-icon-left:after { + display: none; +} + +.align-icon-right { + right: $list-item-padding - 3; +} .list-item-sliding { -webkit-transition: -webkit-transform 0.1s ease-in-out; @@ -233,20 +284,6 @@ a.list-item { } } -/** - * Right-side icon that reused by components like radio buttons - */ -.list-item-icon { - position: absolute; - top: 0; - right: 0; - z-index: 3; - padding: $list-item-padding - 2; - height: 100%; - font-size: 24px; -} - - /** * A list divider. */ diff --git a/scss/ionic/_radio.scss b/scss/ionic/_radio.scss index 8f4479af8a..54beb9f17d 100644 --- a/scss/ionic/_radio.scss +++ b/scss/ionic/_radio.scss @@ -7,9 +7,16 @@ padding-right: $list-item-padding * 4; } -.radio-buttton-list .list-item-icon { +.radio-buttton-list .radio-button-icon { /* checkmark icon will be hidden by default */ + position: absolute; + top: 0; + right: 0; + z-index: 3; visibility: hidden; + padding: $list-item-padding - 2; + height: 100%; + font-size: 24px; } .radio-buttton-list input[type="radio"] { @@ -21,7 +28,7 @@ background: #f7f7f7; } - &:checked ~ .list-item-icon { + &:checked ~ .radio-button-icon { /* show the checkmark icon when its checked */ visibility: visible; } diff --git a/scss/ionic/_util.scss b/scss/ionic/_util.scss index a460276bcc..ea7a8e456c 100644 --- a/scss/ionic/_util.scss +++ b/scss/ionic/_util.scss @@ -50,37 +50,60 @@ } -// Inset Margin -// ------------------------------- - -.margin { - margin: $inset-margin; -} - -.margin-top, -.margin-vertical { - margin-top: $inset-margin; -} - -.margin-right, -.margin-horizontal { - margin-right: $inset-margin; -} - -.margin-bottom, -.margin-vertical { - margin-bottom: $inset-margin; -} - -.margin-left, -.margin-horizontal { - margin-left: $inset-margin; -} - - // Rounded // ------------------------------- .rounded { border-radius: $border-radius-base; } + +// Colors +// ------------------------------- + +.brand-default { + color: $brand-default; +} +.brand-secondary { + color: $brand-secondary; +} +.brand-primary { + color: $brand-primary; +} +.brand-info { + color: $brand-info; +} +.brand-success { + color: $brand-success; +} +.brand-warning { + color: $brand-warning; +} +.brand-danger { + color: $brand-danger; +} +.brand-dark { + color: $brand-dark; +} + +.black { + color: $black; +} +.gray-darker { + color: $gray-darker; +} +.gray-dark { + color: $gray-dark; +} +.gray { + color: $gray; +} +.gray-light { + color: $gray-light; +} +.gray-lighter { + color: $gray-lighter; +} +.white { + color: $white; +} + diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss index 166294dd5f..922bff429f 100644 --- a/scss/ionic/_variables.scss +++ b/scss/ionic/_variables.scss @@ -62,7 +62,6 @@ $base-font-family: $sans-font-family; $base-background-color: $white; $base-color: #000; $content-padding: 10px !default; -$inset-margin: 10px; $border-radius-base: 4px !default; $border-radius-large: 6px !default; $border-radius-small: 3px !default; @@ -338,10 +337,11 @@ $tabs-dark-border-color: $button-dark-border; // Lists // ------------------------------- -$list-divider-bg: #f5f5f5; -$list-divider-color: #222; -$list-item-border: 1px solid #ddd; -$list-item-padding: 15px !default; +$list-divider-bg: #f5f5f5; +$list-divider-color: #222; +$list-item-border-width: 1px !default; +$list-item-border-color: #ddd; +$list-item-padding: 15px !default; $list-default-background: $brand-default; $list-default-border: #ddd; @@ -368,6 +368,13 @@ $list-dark-background: $brand-dark; $list-dark-border: $brand-dark; +// Icons +// ------------------------------- + +$icon-font-size: 28px !default; +$icon-fill-border-radius: 6px !default; + + // Menus // ------------------------------- diff --git a/scss/ionic/ionic-scoped.scss b/scss/ionic/ionic-scoped.scss index 8920db24f2..37eb3c0673 100644 --- a/scss/ionic/ionic-scoped.scss +++ b/scss/ionic/ionic-scoped.scss @@ -46,6 +46,7 @@ "animations", // Util + "icons", "util", "platform"; diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss index 6199bf72df..ec2dbf70a7 100644 --- a/scss/ionic/ionic.scss +++ b/scss/ionic/ionic.scss @@ -46,5 +46,6 @@ "animations", // Util + "icons", "util", "platform"; diff --git a/test/input-checkbox.html b/test/input-checkbox.html index 017adcf362..b6e7ccf977 100644 --- a/test/input-checkbox.html +++ b/test/input-checkbox.html @@ -52,6 +52,10 @@ +
+

Homepage

+
+ diff --git a/test/input-radio.html b/test/input-radio.html index 80a9cd65d1..7e839237e3 100644 --- a/test/input-radio.html +++ b/test/input-radio.html @@ -28,7 +28,7 @@
Go
-
+
diff --git a/test/lists.html b/test/lists.html index 9620cb63f2..0d33e5b262 100644 --- a/test/lists.html +++ b/test/lists.html @@ -5,90 +5,219 @@ - - + -
+
+

Customers

+
-
-

Customers

-
+
+
+ +
+ + +
+ Madison, WI +
+ + + +
+ Driving Directions +
+ + + +
+ Settings +
+
+ +
+ -
-
- -

Homepage

-
-
- - +
+ +
+ Madison, WI + +
+ + + +
+ Driving Directions + +
+
+ +
+ + + +
+ Settings + +
+ + +
+ +
+ + +
+ + Madison, WI asdf +
+
+ +
+ + + +
+ + Driving Directions +
+ + + +
+ + Settings +
+ + +
+ +
+ + +
+ + Madison, WI + +
+ + + +
+ + Driving Directions + +
+
+ +
+ + + +
+ + Settings + +
+ + +
+ +
+ + +
+ + Madison, WI + +
+ + + +
+ + Driving Directions + +
+ + + +
+ + Settings + +
+
+ +
+ + +
+ +
+ + +
+ +
+ Homepage +
+ + + + + + + +