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

List view styles and base fixes

Browse Source
This commit is contained in:
Max Lynch
2013-09-11 19:47:11 -05:00
parent ea6c4a051a
commit 5c01651d8c
4 changed files with 64 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
scss/_mixins.scss
View File

@ -24,9 +24,27 @@
}
}
//
// Mixins
// --------------------------------------------------
@mixin list-style($bgColor, $borderColor, $color) {
color: $color;
background-color: $bgColor;
border-color: $borderColor;
// Give desktop users something to play with
&:hover {
color: $color;
text-decoration: none;
// TODO: Verify if we should keep this or not. Feels weird on Safari
// Since the button shows the hover state after clicking, but we only
// want it on desktop
//background-color: lighten($bgColor, 10%);
}
&.active, &:active {
background-color: darken($bgColor, 8%);
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
border-color: darken($borderColor, 10%);
}
}
// UTILITY MIXINS

37
scss/_variables.scss
View File

@ -2,11 +2,14 @@
// Brand Colors
// -------------------------------
$brand-primary: #428bca;
$brand-success: #5cb85c;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
$brand-info: #5bc0de;
$brand-default: #fff;
$brand-secondary: #f5f5f5;
$brand-primary: #6999e9;
$brand-success: #89c163;
$brand-warning: #f0b840;
$brand-danger: #de5645;
$brand-info: #60d2e6;
$brand-dark: #444;
// Scaffolding
// -------------------------------
@ -225,6 +228,30 @@ $list-divider-bg: #f5f5f5;
$list-divider-color: #222;
$list-item-border: 1px solid #ddd;
$list-default-background: $brand-default;
$list-default-border: #ddd;
$list-secondary-background: $brand-secondary;
$list-secondary-border: #ddd;
$list-success-background: $brand-success;
$list-success-border: $brand-success;
$list-primary-background: $brand-primary;
$list-primary-border: $brand-primary;
$list-info-background: $brand-info;
$list-info-border: $brand-info;
$list-warning-background: $brand-warning;
$list-warning-border: $brand-warning;
$list-danger-background: $brand-danger;
$list-danger-border: $brand-danger;
$list-dark-background: $brand-dark;
$list-dark-border: $brand-dark;
// Form States and Alerts
// -------------------------------

3
scss/ionic/_base.scss
View File

@ -38,8 +38,9 @@ body {
right: 0;
bottom: 0;
left: 0;
height: auto;
overflow: auto;
// TODO: Fix the dynamic content height issue
//height: 100%;
}
/* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */

10
scss/ionic/_listview.scss
View File

@ -2,6 +2,12 @@
// No need to set list-style: none; since .list-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
@include list-style($list-default-background, $list-default-border, $gray-dark);
&.list-success {
@include list-style($list-success-background, $list-success-border, $white);
}
}
// Individual list items
@ -14,7 +20,7 @@
margin-bottom: -1px;
padding: 15px 15px;
//background-color: $list-group-bg;
background-color: $list-default-background;
border: $list-item-border;
// Round the first and last items
@ -59,6 +65,7 @@
//color: lighten($list-group-active-bg, 40%);
}
}
}
// Linked list items
@ -81,6 +88,7 @@ a.list-item {
font-weight: bold;
}
// Custom content options
// -------------------------