playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

organizing android css

pull/253/head
connors 11 years ago
parent
4e51015438
commit
83aa6941f5
5 changed files with 585 additions and 563 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -15,6 +15,13 @@ body {
color: #222222; color: #222222;
} }
a {
color: #33b5e5;
}
a:active {
color: #1a9bcb;
}
.content { .content {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
@ -31,152 +38,6 @@ body {
padding-top: 100px; 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 { .btn {
padding: 8px 15px; padding: 8px 15px;
font-size: 14px; 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); 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 { .btn-primary {
color: #fff; color: #fff;
border: 0; border: 0;
@ -296,6 +143,69 @@ textarea,
font-size: 18px; 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 { .bar-nav .btn {
margin-top: 7px; margin-top: 7px;
} }
@ -308,6 +218,14 @@ textarea,
opacity: .6; opacity: .6;
} }
.bar .segmented-control {
top: 7px;
}
.bar .icon {
margin-top: 13px;
}
.badge.badge-inverted { .badge.badge-inverted {
color: #999999; color: #999999;
background-color: transparent; background-color: transparent;
@ -340,15 +258,97 @@ textarea,
background-color: transparent; background-color: transparent;
} }
.btn .badge { .card {
background-color: rgba(0, 0, 0, 0.15); border-color: #d9d9d9;
border-radius: 2px;
background-color: transparent;
} }
.btn .badge.badge-inverted {
.table-view {
background-color: transparent; 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; 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 { .segmented-control {
background-color: #cecece; background-color: #cecece;
@ -421,10 +421,6 @@ textarea,
color: #fff; color: #fff;
} }
.bar .segmented-control {
top: 7px;
}
.popover { .popover {
top: 90px; top: 90px;
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;
@ -437,6 +433,17 @@ textarea,
display: none; display: none;
} }
.popover .bar {
border-radius: 0;
}
.popover .bar-nav ~ .table-view {
padding-top: 50px;
}
.popover .table-view {
border-radius: 12px;
}
.toggle { .toggle {
width: 104px; width: 104px;
height: 28px; height: 28px;
@ -477,7 +484,3 @@ textarea,
color: #fff; color: #fff;
content: "On"; content: "On";
} }
.bar .icon {
margin-top: 13px;
}

3
dist/ios-theme.css vendored
Unescape View File

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

310
docs-assets/css/docs.css
Unescape View File

@ -795,6 +795,9 @@ hr {
.platform-ios a { .platform-ios a {
color: #007aff; color: #007aff;
} }
.platform-ios a:active {
color: #0062cc;
}
.platform-ios .content { .platform-ios .content {
background-color: #efeff4; background-color: #efeff4;
} }
@ -1182,6 +1185,12 @@ hr {
line-height: 22px; line-height: 22px;
color: #222222; color: #222222;
} }
.platform-android a {
color: #33b5e5;
}
.platform-android a:active {
color: #1a9bcb;
}
.platform-android .content { .platform-android .content {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
@ -1194,135 +1203,6 @@ hr {
.platform-android .bar-header-secondary ~ .content { .platform-android .bar-header-secondary ~ .content {
padding-top: 100px; 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 { .platform-android .btn {
padding: 8px 15px; padding: 8px 15px;
font-size: 14px; font-size: 14px;
@ -1338,19 +1218,6 @@ hr {
background-color: #999999; 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); 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 { .platform-android .btn-primary {
color: #fff; color: #fff;
border: 0; border: 0;
@ -1434,6 +1301,64 @@ hr {
padding: 15px 0; padding: 15px 0;
font-size: 18px; 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 { .platform-android .bar-nav .btn {
margin-top: 7px; margin-top: 7px;
} }
@ -1445,6 +1370,12 @@ hr {
color: #33b5e5; color: #33b5e5;
opacity: .6; opacity: .6;
} }
.platform-android .bar .segmented-control {
top: 7px;
}
.platform-android .bar .icon {
margin-top: 13px;
}
.platform-android .badge.badge-inverted { .platform-android .badge.badge-inverted {
color: #999999; color: #999999;
background-color: transparent; background-color: transparent;
@ -1473,15 +1404,87 @@ hr {
color: #ff4444; color: #ff4444;
background-color: transparent; background-color: transparent;
} }
.platform-android .btn .badge { .platform-android .card {
background-color: rgba(0, 0, 0, 0.15); border-color: #d9d9d9;
border-radius: 2px;
background-color: transparent;
} }
.platform-android .btn .badge.badge-inverted { .platform-android .table-view {
background-color: transparent; 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; 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 { .platform-android .segmented-control {
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
@ -1549,9 +1552,6 @@ hr {
.platform-android .segmented-control-negative li:active > a, .platform-android .segmented-control-negative li.active > a { .platform-android .segmented-control-negative li:active > a, .platform-android .segmented-control-negative li.active > a {
color: #fff; color: #fff;
} }
.platform-android .bar .segmented-control {
top: 7px;
}
.platform-android .popover { .platform-android .popover {
top: 90px; top: 90px;
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;
@ -1563,6 +1563,15 @@ hr {
.platform-android .popover:before { .platform-android .popover:before {
display: none; 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 { .platform-android .toggle {
width: 104px; width: 104px;
height: 28px; height: 28px;
@ -1603,9 +1612,6 @@ hr {
color: #fff; color: #fff;
content: "On"; content: "On";
} }
.platform-android .bar .icon {
margin-top: 13px;
}
.platform-android .device { .platform-android .device {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background-image: url("../img/android.png"); background-image: url("../img/android.png");

480
lib/sass/theme-android.scss
Unescape View File

@ -6,6 +6,7 @@
// //
// -------------------------------------------------- // --------------------------------------------------
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
@ -17,6 +18,7 @@ $font-weight-light: 400;
$line-height-default: 22px; $line-height-default: 22px;
// Colors // Colors
//
// Main theme colors // Main theme colors
$primary-color: #33b5e5; $primary-color: #33b5e5;
$chrome-color: #dddddd; $chrome-color: #dddddd;
@ -46,10 +48,19 @@ body {
color: $text-color; color: $text-color;
} }
// Universal link styling
a {
color: $primary-color;
&:active {
color: darken($primary-color, 10%);
}
}
// Content
.content { .content {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. // 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 // Note: For these to work, content must come after both bars in the markup
.bar-nav ~ .content { .bar-nav ~ .content {
@ -62,197 +73,6 @@ body {
padding-top: $bar-base-height*2; 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 // 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 // Other button types
// -------------------------------------------------- // --------------------------------------------------
@ -407,9 +210,98 @@ textarea,
font-size: 18px; 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 { .bar-nav {
.btn { .btn {
margin-top: 7px; 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 // Badges
// -------------------------------------------------- // --------------------------------------------------
@ -437,10 +340,8 @@ textarea,
} }
} }
// Badge modifiers // Badge modifiers
// -------------------------------------------------- //
// Main badge // Main badge
.badge-primary { .badge-primary {
color: #fff; color: #fff;
@ -474,24 +375,123 @@ textarea,
} }
} }
// Badges in buttons
.btn {
.badge {
background-color: rgba(0,0,0,.15);
&.badge-inverted { // Cards
background-color: transparent; // --------------------------------------------------
.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 // Table view dividers
&:active .badge { .table-view-divider {
color: #fff; 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 // Segmented controllers
// -------------------------------------------------- // --------------------------------------------------
@ -593,16 +593,6 @@ textarea,
} }
// Segmented controller in all bars
// --------------------------------------------------
// Remove standard segmented bottom margin
.bar .segmented-control {
top: 7px;
}
//
// Popovers // 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 // Toggles styles
@ -666,8 +673,3 @@ textarea,
} }
} }
} }
// Ratchicons in nav bars
.bar .icon {
margin-top: 13px;
}

8
lib/sass/theme-ios.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save