Browse Source

organizing android css

pull/253/head
connors 11 years ago
parent
commit
83aa6941f5
  1. 347
      dist/android-theme.css
  2. 3
      dist/ios-theme.css
  3. 310
      docs-assets/css/docs.css
  4. 480
      lib/sass/theme-android.scss
  5. 8
      lib/sass/theme-ios.scss

347
dist/android-theme.css vendored

@ -15,6 +15,13 @@ body {
color: #222222;
}
a {
color: #33b5e5;
}
a:active {
color: #1a9bcb;
}
.content {
background-color: #f2f2f2;
}
@ -31,152 +38,6 @@ body {
padding-top: 100px;
}
a {
color: #33b5e5;
}
.bar {
height: 50px;
background-color: #dddddd;
border-bottom: 1px solid #b1b1b1;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
}
.bar.bar-header-secondary {
top: 50px;
}
.bar.bar-footer-secondary {
bottom: 50px;
}
.bar.bar-footer-secondary-tab {
bottom: 50px;
}
.bar-tab {
top: 0;
bottom: auto;
height: 50px;
border-top: 0;
}
.bar-tab .tab-item .icon {
margin-top: 0;
}
.bar-tab .tab-item.active .tab-label,
.bar-tab .tab-item.active .icon, .bar-tab .tab-item:active .tab-label,
.bar-tab .tab-item:active .icon {
color: #33b5e5;
}
.title {
position: static;
padding-left: 15px;
font-size: 18px;
line-height: 49px;
text-align: left;
}
.popover .bar {
border-radius: 0;
}
.popover .bar ~ .table-view {
padding-top: 50px;
}
.card {
border-color: #d9d9d9;
border-radius: 2px;
background-color: transparent;
}
.table-view {
background-color: transparent;
}
.table-view .table-view-cell {
border-bottom: 1px solid #d9d9d9;
}
.table-view .table-view-cell:last-child {
background-image: none;
}
.table-view .table-view-cell > a:not(.btn):active {
background-color: #33b5e5;
}
.table-view .table-view-cell > a:not(.btn):active .icon {
color: #fff;
}
.table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
.popover .table-view {
border-radius: 12px;
}
.table-view .btn {
margin-top: -4px;
}
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
input[type="search"] {
border-radius: 2px;
}
select,
textarea,
.input-group {
height: auto;
}
.input-group {
padding: 0;
border: 0;
}
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
}
.input-group input:last-child {
background-image: none;
}
.input-row {
border-bottom: 1px solid #d9d9d9;
}
.input-row label + input {
background-image: none;
border-bottom: 0;
}
.btn {
padding: 8px 15px;
font-size: 14px;
@ -193,20 +54,6 @@ textarea,
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.bar .btn {
padding-top: 9px;
padding-bottom: 9px;
}
.bar .btn-link {
padding: 0;
color: #33b5e5;
font-size: 18px;
line-height: 49px;
}
.bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb;
}
.btn-primary {
color: #fff;
border: 0;
@ -296,6 +143,69 @@ textarea,
font-size: 18px;
}
.btn .badge {
background-color: rgba(0, 0, 0, 0.15);
}
.btn .badge.badge-inverted {
background-color: transparent;
}
.btn:active .badge {
color: #fff;
}
.bar {
height: 50px;
background-color: #dddddd;
border-bottom: 1px solid #b1b1b1;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
}
.bar.bar-header-secondary {
top: 50px;
}
.bar.bar-footer-secondary {
bottom: 50px;
}
.bar.bar-footer-secondary-tab {
bottom: 50px;
}
.bar-tab {
top: 0;
bottom: auto;
height: 50px;
border-top: 0;
}
.bar-tab .tab-item .icon {
margin-top: 0;
}
.bar-tab .tab-item.active .tab-label,
.bar-tab .tab-item.active .icon, .bar-tab .tab-item:active .tab-label,
.bar-tab .tab-item:active .icon {
color: #33b5e5;
}
.title {
position: static;
padding-left: 15px;
font-size: 18px;
line-height: 49px;
text-align: left;
}
.bar .btn {
padding-top: 9px;
padding-bottom: 9px;
}
.bar .btn-link {
padding: 0;
color: #33b5e5;
font-size: 18px;
line-height: 49px;
}
.bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb;
}
.bar-nav .btn {
margin-top: 7px;
}
@ -308,6 +218,14 @@ textarea,
opacity: .6;
}
.bar .segmented-control {
top: 7px;
}
.bar .icon {
margin-top: 13px;
}
.badge.badge-inverted {
color: #999999;
background-color: transparent;
@ -340,15 +258,97 @@ textarea,
background-color: transparent;
}
.btn .badge {
background-color: rgba(0, 0, 0, 0.15);
.card {
border-color: #d9d9d9;
border-radius: 2px;
background-color: transparent;
}
.btn .badge.badge-inverted {
.table-view {
background-color: transparent;
}
.btn:active .badge {
.table-view .table-view-cell {
border-bottom: 1px solid #d9d9d9;
}
.table-view .table-view-cell:last-child {
background-image: none;
}
.table-view .table-view-cell > a:not(.btn):active {
background-color: #33b5e5;
}
.table-view .table-view-cell > a:not(.btn):active .icon {
color: #fff;
}
.table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
.table-view .btn {
margin-top: -4px;
}
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
input[type="search"] {
border-radius: 2px;
}
select,
textarea,
.input-group {
height: auto;
}
.input-group {
padding: 0;
border: 0;
}
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
}
.input-group input:last-child {
background-image: none;
}
.input-row {
border-bottom: 1px solid #d9d9d9;
}
.input-row label + input {
background-image: none;
border-bottom: 0;
}
.segmented-control {
background-color: #cecece;
@ -421,10 +421,6 @@ textarea,
color: #fff;
}
.bar .segmented-control {
top: 7px;
}
.popover {
top: 90px;
border: 1px solid #9b9b9b;
@ -437,6 +433,17 @@ textarea,
display: none;
}
.popover .bar {
border-radius: 0;
}
.popover .bar-nav ~ .table-view {
padding-top: 50px;
}
.popover .table-view {
border-radius: 12px;
}
.toggle {
width: 104px;
height: 28px;
@ -477,7 +484,3 @@ textarea,
color: #fff;
content: "On";
}
.bar .icon {
margin-top: 13px;
}

3
dist/ios-theme.css vendored

@ -11,6 +11,9 @@
a {
color: #007aff;
}
a:active {
color: #0062cc;
}
.content {
background-color: #efeff4;

310
docs-assets/css/docs.css

@ -795,6 +795,9 @@ hr {
.platform-ios a {
color: #007aff;
}
.platform-ios a:active {
color: #0062cc;
}
.platform-ios .content {
background-color: #efeff4;
}
@ -1182,6 +1185,12 @@ hr {
line-height: 22px;
color: #222222;
}
.platform-android a {
color: #33b5e5;
}
.platform-android a:active {
color: #1a9bcb;
}
.platform-android .content {
background-color: #f2f2f2;
}
@ -1194,135 +1203,6 @@ hr {
.platform-android .bar-header-secondary ~ .content {
padding-top: 100px;
}
.platform-android a {
color: #33b5e5;
}
.platform-android .bar {
height: 50px;
background-color: #dddddd;
border-bottom: 1px solid #b1b1b1;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
}
.platform-android .bar.bar-header-secondary {
top: 50px;
}
.platform-android .bar.bar-footer-secondary {
bottom: 50px;
}
.platform-android .bar.bar-footer-secondary-tab {
bottom: 50px;
}
.platform-android .bar-tab {
top: 0;
bottom: auto;
height: 50px;
border-top: 0;
}
.platform-android .bar-tab .tab-item .icon {
margin-top: 0;
}
.platform-android .bar-tab .tab-item.active .tab-label,
.platform-android .bar-tab .tab-item.active .icon, .platform-android .bar-tab .tab-item:active .tab-label,
.platform-android .bar-tab .tab-item:active .icon {
color: #33b5e5;
}
.platform-android .title {
position: static;
padding-left: 15px;
font-size: 18px;
line-height: 49px;
text-align: left;
}
.platform-android .popover .bar {
border-radius: 0;
}
.platform-android .popover .bar ~ .table-view {
padding-top: 50px;
}
.platform-android .card {
border-color: #d9d9d9;
border-radius: 2px;
background-color: transparent;
}
.platform-android .table-view {
background-color: transparent;
}
.platform-android .table-view .table-view-cell {
border-bottom: 1px solid #d9d9d9;
}
.platform-android .table-view .table-view-cell:last-child {
background-image: none;
}
.platform-android .table-view .table-view-cell > a:not(.btn):active {
background-color: #33b5e5;
}
.platform-android .table-view .table-view-cell > a:not(.btn):active .icon {
color: #fff;
}
.platform-android .table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
.platform-android .popover .table-view {
border-radius: 12px;
}
.platform-android .table-view .btn {
margin-top: -4px;
}
.platform-android select,
.platform-android textarea,
.platform-android input[type="text"],
.platform-android input[type="search"],
.platform-android input[type="password"],
.platform-android input[type="datetime"],
.platform-android input[type="datetime-local"],
.platform-android input[type="date"],
.platform-android input[type="month"],
.platform-android input[type="time"],
.platform-android input[type="week"],
.platform-android input[type="number"],
.platform-android input[type="email"],
.platform-android input[type="url"],
.platform-android input[type="tel"],
.platform-android input[type="color"],
.platform-android .input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.platform-android input[type="search"] {
border-radius: 2px;
}
.platform-android select,
.platform-android textarea,
.platform-android .input-group {
height: auto;
}
.platform-android .input-group {
padding: 0;
border: 0;
}
.platform-android .input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
}
.platform-android .input-group input:last-child {
background-image: none;
}
.platform-android .input-row {
border-bottom: 1px solid #d9d9d9;
}
.platform-android .input-row label + input {
background-image: none;
border-bottom: 0;
}
.platform-android .btn {
padding: 8px 15px;
font-size: 14px;
@ -1338,19 +1218,6 @@ hr {
background-color: #999999;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.platform-android .bar .btn {
padding-top: 9px;
padding-bottom: 9px;
}
.platform-android .bar .btn-link {
padding: 0;
color: #33b5e5;
font-size: 18px;
line-height: 49px;
}
.platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
color: #1a9bcb;
}
.platform-android .btn-primary {
color: #fff;
border: 0;
@ -1434,6 +1301,64 @@ hr {
padding: 15px 0;
font-size: 18px;
}
.platform-android .btn .badge {
background-color: rgba(0, 0, 0, 0.15);
}
.platform-android .btn .badge.badge-inverted {
background-color: transparent;
}
.platform-android .btn:active .badge {
color: #fff;
}
.platform-android .bar {
height: 50px;
background-color: #dddddd;
border-bottom: 1px solid #b1b1b1;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
}
.platform-android .bar.bar-header-secondary {
top: 50px;
}
.platform-android .bar.bar-footer-secondary {
bottom: 50px;
}
.platform-android .bar.bar-footer-secondary-tab {
bottom: 50px;
}
.platform-android .bar-tab {
top: 0;
bottom: auto;
height: 50px;
border-top: 0;
}
.platform-android .bar-tab .tab-item .icon {
margin-top: 0;
}
.platform-android .bar-tab .tab-item.active .tab-label,
.platform-android .bar-tab .tab-item.active .icon, .platform-android .bar-tab .tab-item:active .tab-label,
.platform-android .bar-tab .tab-item:active .icon {
color: #33b5e5;
}
.platform-android .title {
position: static;
padding-left: 15px;
font-size: 18px;
line-height: 49px;
text-align: left;
}
.platform-android .bar .btn {
padding-top: 9px;
padding-bottom: 9px;
}
.platform-android .bar .btn-link {
padding: 0;
color: #33b5e5;
font-size: 18px;
line-height: 49px;
}
.platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
color: #1a9bcb;
}
.platform-android .bar-nav .btn {
margin-top: 7px;
}
@ -1445,6 +1370,12 @@ hr {
color: #33b5e5;
opacity: .6;
}
.platform-android .bar .segmented-control {
top: 7px;
}
.platform-android .bar .icon {
margin-top: 13px;
}
.platform-android .badge.badge-inverted {
color: #999999;
background-color: transparent;
@ -1473,15 +1404,87 @@ hr {
color: #ff4444;
background-color: transparent;
}
.platform-android .btn .badge {
background-color: rgba(0, 0, 0, 0.15);
.platform-android .card {
border-color: #d9d9d9;
border-radius: 2px;
background-color: transparent;
}
.platform-android .btn .badge.badge-inverted {
.platform-android .table-view {
background-color: transparent;
}
.platform-android .btn:active .badge {
.platform-android .table-view .table-view-cell {
border-bottom: 1px solid #d9d9d9;
}
.platform-android .table-view .table-view-cell:last-child {
background-image: none;
}
.platform-android .table-view .table-view-cell > a:not(.btn):active {
background-color: #33b5e5;
}
.platform-android .table-view .table-view-cell > a:not(.btn):active .icon {
color: #fff;
}
.platform-android .table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
.platform-android .table-view .btn {
margin-top: -4px;
}
.platform-android select,
.platform-android textarea,
.platform-android input[type="text"],
.platform-android input[type="search"],
.platform-android input[type="password"],
.platform-android input[type="datetime"],
.platform-android input[type="datetime-local"],
.platform-android input[type="date"],
.platform-android input[type="month"],
.platform-android input[type="time"],
.platform-android input[type="week"],
.platform-android input[type="number"],
.platform-android input[type="email"],
.platform-android input[type="url"],
.platform-android input[type="tel"],
.platform-android input[type="color"],
.platform-android .input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.platform-android input[type="search"] {
border-radius: 2px;
}
.platform-android select,
.platform-android textarea,
.platform-android .input-group {
height: auto;
}
.platform-android .input-group {
padding: 0;
border: 0;
}
.platform-android .input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
}
.platform-android .input-group input:last-child {
background-image: none;
}
.platform-android .input-row {
border-bottom: 1px solid #d9d9d9;
}
.platform-android .input-row label + input {
background-image: none;
border-bottom: 0;
}
.platform-android .segmented-control {
background-color: #cecece;
border: 0;
@ -1549,9 +1552,6 @@ hr {
.platform-android .segmented-control-negative li:active > a, .platform-android .segmented-control-negative li.active > a {
color: #fff;
}
.platform-android .bar .segmented-control {
top: 7px;
}
.platform-android .popover {
top: 90px;
border: 1px solid #9b9b9b;
@ -1563,6 +1563,15 @@ hr {
.platform-android .popover:before {
display: none;
}
.platform-android .popover .bar {
border-radius: 0;
}
.platform-android .popover .bar-nav ~ .table-view {
padding-top: 50px;
}
.platform-android .popover .table-view {
border-radius: 12px;
}
.platform-android .toggle {
width: 104px;
height: 28px;
@ -1603,9 +1612,6 @@ hr {
color: #fff;
content: "On";
}
.platform-android .bar .icon {
margin-top: 13px;
}
.platform-android .device {
font-family: 'Roboto', sans-serif;
background-image: url("../img/android.png");

480
lib/sass/theme-android.scss

@ -6,6 +6,7 @@
//
// --------------------------------------------------
// Variables
// --------------------------------------------------
@ -17,6 +18,7 @@ $font-weight-light: 400;
$line-height-default: 22px;
// Colors
//
// Main theme colors
$primary-color: #33b5e5;
$chrome-color: #dddddd;
@ -46,10 +48,19 @@ body {
color: $text-color;
}
// Universal link styling
a {
color: $primary-color;
&:active {
color: darken($primary-color, 10%);
}
}
// Content
.content {
background-color: #f2f2f2;
}
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
// Note: For these to work, content must come after both bars in the markup
.bar-nav ~ .content {
@ -62,197 +73,6 @@ body {
padding-top: $bar-base-height*2;
}
// Universal link styling
a {
color: $primary-color;
}
// Bars
// --------------------------------------------------
.bar {
height: $bar-base-height;
background-color: $chrome-color;
border-bottom: $border-default;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0,0,0,.07);
// Modifier class to dock any bar below .bar-nav
&.bar-header-secondary {
top: $bar-base-height;
}
// Modifier class to dock any bar above a standard bar
&.bar-footer-secondary {
bottom: $bar-base-height;
}
// Modifier class to dock any bar above a .bar-tab
&.bar-footer-secondary-tab {
bottom: $bar-tab-height;
}
}
.bar-tab {
top: 0;
bottom: auto;
height: $bar-tab-height;
border-top: 0;
.tab-item {
.icon {
margin-top: 0;
}
// Active states for the tab bar
&.active,
&:active {
.tab-label,
.icon {
color: $primary-color;
}
}
}
}
// Left aligned text in the .bar-nav
.title {
position: static;
padding-left: 15px;
font-size: $font-size-default;
line-height: 49px;
text-align: left;
}
// `bar-nav` in popovers
.popover {
.bar {
border-radius: 0;
}
.bar ~ .table-view {
padding-top: $bar-base-height;
}
}
//
// Cards
// --------------------------------------------------
.card {
border-color: #d9d9d9;
border-radius: $border-radius;
background-color: transparent;
}
// Table views
// --------------------------------------------------
.table-view {
background-color: transparent;
.table-view-cell {
border-bottom: 1px solid #d9d9d9;
// Remove the border from the last table view item
&:last-child {
background-image: none;
}
> a:not(.btn):active {
background-color: $primary-color;
.icon {
color: #fff;
}
}
}
// Table view dividers
.table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
}
.popover .table-view {
border-radius: 12px;
}
// Buttons in table-views
// --------------------------------------------------
.table-view .btn {
margin-top: -4px; // Center the btn inside the cell
}
// Forms
// --------------------------------------------------
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
input[type="search"] {
border-radius: $border-radius;
}
select,
textarea,
.input-group {
height: auto;
}
// Input groups (cluster multiple inputs together into a single group)
// -------------------------------------------------------------------
.input-group {
padding: 0;
border: 0;
}
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
}
// Remove bottom border on last input to avoid double bottom border
.input-group input:last-child {
background-image: none;
}
// Input groups with labels
// --------------------------------------------------
// To use labels with input groups, wrap a label and an input in an .input-row
.input-row {
border-bottom: 1px solid #d9d9d9;
}
// Remove bottom border on last input-row to avoid double bottom border
.input-row label + input {
background-image: none;
border-bottom: 0;
}
// Buttons
// --------------------------------------------------
@ -276,23 +96,6 @@ textarea,
}
}
.bar {
.btn {
padding-top: 9px;
padding-bottom: 9px;
}
.btn-link {
padding: 0;
color: $primary-color;
font-size: $font-size-default;
line-height: 49px;
&:active,
&.active {
color: darken($primary-color, 10%);
}
}
}
// Other button types
// --------------------------------------------------
@ -407,9 +210,98 @@ textarea,
font-size: 18px;
}
// Buttons in nav bars
// Buttons with badges
.btn {
.badge {
background-color: rgba(0,0,0,.15);
&.badge-inverted {
background-color: transparent;
}
}
// Active states
&:active .badge {
color: #fff;
}
}
// Bars
// --------------------------------------------------
.bar {
height: $bar-base-height;
background-color: $chrome-color;
border-bottom: $border-default;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0,0,0,.07);
// Modifier class to dock any bar below .bar-nav
&.bar-header-secondary {
top: $bar-base-height;
}
// Modifier class to dock any bar above a standard bar
&.bar-footer-secondary {
bottom: $bar-base-height;
}
// Modifier class to dock any bar above a .bar-tab
&.bar-footer-secondary-tab {
bottom: $bar-tab-height;
}
}
.bar-tab {
top: 0;
bottom: auto;
height: $bar-tab-height;
border-top: 0;
.tab-item {
.icon {
margin-top: 0;
}
// Active states for the tab bar
&.active,
&:active {
.tab-label,
.icon {
color: $primary-color;
}
}
}
}
// Left aligned text in the .bar-nav
.title {
position: static;
padding-left: 15px;
font-size: $font-size-default;
line-height: 49px;
text-align: left;
}
// Bars with buttons
.bar {
.btn {
padding-top: 9px;
padding-bottom: 9px;
}
.btn-link {
padding: 0;
color: $primary-color;
font-size: $font-size-default;
line-height: 49px;
&:active,
&.active {
color: darken($primary-color, 10%);
}
}
}
// Nav bars with buttons
.bar-nav {
.btn {
margin-top: 7px;
@ -425,8 +317,19 @@ textarea,
}
}
// Bars with segmented-controls
//
// Remove standard segmented bottom margin
.bar .segmented-control {
top: 7px;
}
// Bars with Ratchicons
.bar .icon {
margin-top: 13px;
}
//
// Badges
// --------------------------------------------------
@ -437,10 +340,8 @@ textarea,
}
}
// Badge modifiers
// --------------------------------------------------
//
// Main badge
.badge-primary {
color: #fff;
@ -474,24 +375,123 @@ textarea,
}
}
// Badges in buttons
.btn {
.badge {
background-color: rgba(0,0,0,.15);
&.badge-inverted {
background-color: transparent;
// Cards
// --------------------------------------------------
.card {
border-color: #d9d9d9;
border-radius: $border-radius;
background-color: transparent;
}
// Table views
// --------------------------------------------------
.table-view {
background-color: transparent;
.table-view-cell {
border-bottom: 1px solid #d9d9d9;
// Remove the border from the last table view item
&:last-child {
background-image: none;
}
> a:not(.btn):active {
background-color: $primary-color;
.icon {
color: #fff;
}
}
}
// Active states
&:active .badge {
color: #fff;
// Table view dividers
.table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
}
// Table-views with buttons
// --------------------------------------------------
.table-view .btn {
margin-top: -4px; // Center the btn inside the cell
}
// Forms
// --------------------------------------------------
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
input[type="search"] {
border-radius: $border-radius;
}
select,
textarea,
.input-group {
height: auto;
}
// Input groups (cluster multiple inputs together into a single group)
// -------------------------------------------------------------------
.input-group {
padding: 0;
border: 0;
}
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
}
// Remove bottom border on last input to avoid double bottom border
.input-group input:last-child {
background-image: none;
}
// Input groups with labels
// --------------------------------------------------
// To use labels with input groups, wrap a label and an input in an .input-row
.input-row {
border-bottom: 1px solid #d9d9d9;
}
// Remove bottom border on last input-row to avoid double bottom border
.input-row label + input {
background-image: none;
border-bottom: 0;
}
//
// Segmented controllers
// --------------------------------------------------
@ -593,16 +593,6 @@ textarea,
}
// Segmented controller in all bars
// --------------------------------------------------
// Remove standard segmented bottom margin
.bar .segmented-control {
top: 7px;
}
//
// Popovers
// --------------------------------------------------
@ -618,6 +608,23 @@ textarea,
}
}
// Popovers with bars
.popover {
.bar {
border-radius: 0;
}
// Padding the content correctly.
.bar-nav ~ .table-view {
padding-top: $bar-base-height;
}
}
// Popovers with table-views
.popover .table-view {
border-radius: 12px;
}
//
// Toggles styles
@ -666,8 +673,3 @@ textarea,
}
}
}
// Ratchicons in nav bars
.bar .icon {
margin-top: 13px;
}

8
lib/sass/theme-ios.scss

@ -11,6 +11,7 @@
// --------------------------------------------------
// Colors
//
// Main theme colors
$primary-color: #007aff;
$chrome-color: rgba(247,247,247,.98);
@ -31,9 +32,16 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
// Base
// --------------------------------------------------
// Universal link styling
a {
color: $primary-color;
&:active {
color: darken($primary-color, 10%);
}
}
// Content
.content {
background-color: #efeff4;
}

Loading…
Cancel
Save