From 4e510154383c9698b3b655961491810059bc4ae1 Mon Sep 17 00:00:00 2001 From: connors Date: Sun, 9 Feb 2014 15:37:38 -0800 Subject: [PATCH] organizing the ios theme --- dist/ios-theme.css | 258 +++++++++++++------------- docs-assets/css/docs.css | 225 ++++++++++++----------- lib/sass/theme-android.scss | 8 +- lib/sass/theme-ios.scss | 348 ++++++++++++++++++------------------ 4 files changed, 416 insertions(+), 423 deletions(-) diff --git a/dist/ios-theme.css b/dist/ios-theme.css index afea7c7..7938f2e 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -16,130 +16,6 @@ a { background-color: #efeff4; } -.bar { - border-bottom: 0; - background-color: rgba(247, 247, 247, 0.98); - -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); - box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); -} -.bar.bar-header-secondary { - top: 44px; -} -.bar.bar-footer-secondary { - bottom: 44px; -} -.bar.bar-footer-secondary-tab { - bottom: 50px; -} - -.bar-tab { - border-top: 0; - -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); - box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); -} - -.tab-item.active .tab-label, -.tab-item.active .icon, .tab-item:active .tab-label, -.tab-item:active .icon { - color: #007aff; -} - -.popover .bar-nav { - border-bottom: 1px solid rgba(0, 0, 0, 0.15); -} - -.table-view .table-view-cell { - border-bottom: 0; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; -} -.table-view .table-view-cell:last-child { - background-image: none; -} -.table-view .table-view-divider { - border-top: 0; - border-bottom: 0; - background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); - background-position: 0 100%, 0 0%; - background-repeat: no-repeat; -} - -.popover .table-view { - border-radius: 12px; -} - -.card .table-view li:last-child { - background-image: none; -} - -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); -} - -input[type="search"] { - height: 34px; - text-align: center; - background-color: rgba(0, 0, 0, 0.1); - border: 0; - border-radius: 6px; -} - -input[type="search"]:focus { - text-align: left; -} - -select, -textarea, -.input-group { - height: auto; -} - -.input-group { - padding: 0; -} - -.input-group input { - border: 0; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; -} - -.input-group input:last-child { - background-image: none; -} - -.input-row { - border-bottom: 0; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; -} - -.input-row:last-child, -.input-row label + input { - background-image: none; -} - .btn { border: 1px solid #929292; color: #929292; @@ -212,6 +88,44 @@ textarea, background-color: transparent; } +.btn .badge { + background-color: rgba(0, 0, 0, 0.15); +} +.btn .badge.badge-inverted { + background-color: transparent; +} +.btn:active .badge { + color: #fff; +} + +.bar { + border-bottom: 0; + background-color: rgba(247, 247, 247, 0.98); + -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); + box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); +} +.bar.bar-header-secondary { + top: 44px; +} +.bar.bar-footer-secondary { + bottom: 44px; +} +.bar.bar-footer-secondary-tab { + bottom: 50px; +} + +.bar-tab { + border-top: 0; + -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); + box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); +} + +.tab-item.active .tab-label, +.tab-item.active .icon, .tab-item:active .tab-label, +.tab-item:active .icon { + color: #007aff; +} + .bar-nav .btn-link { color: #007aff; } @@ -252,14 +166,92 @@ textarea, background-color: transparent; } -.btn .badge { - background-color: rgba(0, 0, 0, 0.15); +.card .table-view-cell:last-child { + background-image: none; } -.btn .badge.badge-inverted { - background-color: transparent; + +.table-view .table-view-cell { + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; } -.btn:active .badge { - color: #fff; +.table-view .table-view-cell:last-child { + background-image: none; +} +.table-view .table-view-divider { + border-top: 0; + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-position: 0 100%, 0 0%; + background-repeat: no-repeat; +} + +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); +} + +input[type="search"] { + height: 34px; + text-align: center; + background-color: rgba(0, 0, 0, 0.1); + border: 0; + border-radius: 6px; +} + +input[type="search"]:focus { + text-align: left; +} + +select, +textarea, +.input-group { + height: auto; +} + +.input-group { + padding: 0; +} + +.input-group input { + border: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; +} + +.input-group input:last-child { + background-image: none; +} + +.input-row { + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; +} + +.input-row:last-child, +.input-row label + input { + background-image: none; } .segmented-control { @@ -347,14 +339,20 @@ textarea, .popover:before { border-bottom: 15px solid rgba(247, 247, 247, 0.98); } + .popover .bar { -webkit-box-shadow: none; box-shadow: none; } + .popover .bar-nav { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } +.popover .table-view { + border-radius: 12px; +} + .modal { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index 4ebf4b2..ee318a9 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -798,114 +798,6 @@ hr { .platform-ios .content { background-color: #efeff4; } -.platform-ios .bar { - border-bottom: 0; - background-color: rgba(247, 247, 247, 0.98); - -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); - box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); -} -.platform-ios .bar.bar-header-secondary { - top: 44px; -} -.platform-ios .bar.bar-footer-secondary { - bottom: 44px; -} -.platform-ios .bar.bar-footer-secondary-tab { - bottom: 50px; -} -.platform-ios .bar-tab { - border-top: 0; - -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); - box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); -} -.platform-ios .tab-item.active .tab-label, -.platform-ios .tab-item.active .icon, .platform-ios .tab-item:active .tab-label, -.platform-ios .tab-item:active .icon { - color: #007aff; -} -.platform-ios .popover .bar-nav { - border-bottom: 1px solid rgba(0, 0, 0, 0.15); -} -.platform-ios .table-view .table-view-cell { - border-bottom: 0; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; -} -.platform-ios .table-view .table-view-cell:last-child { - background-image: none; -} -.platform-ios .table-view .table-view-divider { - border-top: 0; - border-bottom: 0; - background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); - background-position: 0 100%, 0 0%; - background-repeat: no-repeat; -} -.platform-ios .popover .table-view { - border-radius: 12px; -} -.platform-ios .card .table-view li:last-child { - background-image: none; -} -.platform-ios select, -.platform-ios textarea, -.platform-ios input[type="text"], -.platform-ios input[type="search"], -.platform-ios input[type="password"], -.platform-ios input[type="datetime"], -.platform-ios input[type="datetime-local"], -.platform-ios input[type="date"], -.platform-ios input[type="month"], -.platform-ios input[type="time"], -.platform-ios input[type="week"], -.platform-ios input[type="number"], -.platform-ios input[type="email"], -.platform-ios input[type="url"], -.platform-ios input[type="tel"], -.platform-ios input[type="color"], -.platform-ios .input-group { - height: 40px; - padding: 10px 15px; - border: 1px solid rgba(0, 0, 0, 0.2); -} -.platform-ios input[type="search"] { - height: 34px; - text-align: center; - background-color: rgba(0, 0, 0, 0.1); - border: 0; - border-radius: 6px; -} -.platform-ios input[type="search"]:focus { - text-align: left; -} -.platform-ios select, -.platform-ios textarea, -.platform-ios .input-group { - height: auto; -} -.platform-ios .input-group { - padding: 0; -} -.platform-ios .input-group input { - border: 0; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; -} -.platform-ios .input-group input:last-child { - background-image: none; -} -.platform-ios .input-row { - border-bottom: 0; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; -} -.platform-ios .input-row:last-child, -.platform-ios .input-row label + input { - background-image: none; -} .platform-ios .btn { border: 1px solid #929292; color: #929292; @@ -972,6 +864,40 @@ hr { color: #0062cc; background-color: transparent; } +.platform-ios .btn .badge { + background-color: rgba(0, 0, 0, 0.15); +} +.platform-ios .btn .badge.badge-inverted { + background-color: transparent; +} +.platform-ios .btn:active .badge { + color: #fff; +} +.platform-ios .bar { + border-bottom: 0; + background-color: rgba(247, 247, 247, 0.98); + -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); + box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); +} +.platform-ios .bar.bar-header-secondary { + top: 44px; +} +.platform-ios .bar.bar-footer-secondary { + bottom: 44px; +} +.platform-ios .bar.bar-footer-secondary-tab { + bottom: 50px; +} +.platform-ios .bar-tab { + border-top: 0; + -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); + box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); +} +.platform-ios .tab-item.active .tab-label, +.platform-ios .tab-item.active .icon, .platform-ios .tab-item:active .tab-label, +.platform-ios .tab-item:active .icon { + color: #007aff; +} .platform-ios .bar-nav .btn-link { color: #007aff; } @@ -1007,14 +933,82 @@ hr { color: #dd524d; background-color: transparent; } -.platform-ios .btn .badge { - background-color: rgba(0, 0, 0, 0.15); +.platform-ios .card .table-view-cell:last-child { + background-image: none; } -.platform-ios .btn .badge.badge-inverted { - background-color: transparent; +.platform-ios .table-view .table-view-cell { + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; } -.platform-ios .btn:active .badge { - color: #fff; +.platform-ios .table-view .table-view-cell:last-child { + background-image: none; +} +.platform-ios .table-view .table-view-divider { + border-top: 0; + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-position: 0 100%, 0 0%; + background-repeat: no-repeat; +} +.platform-ios select, +.platform-ios textarea, +.platform-ios input[type="text"], +.platform-ios input[type="search"], +.platform-ios input[type="password"], +.platform-ios input[type="datetime"], +.platform-ios input[type="datetime-local"], +.platform-ios input[type="date"], +.platform-ios input[type="month"], +.platform-ios input[type="time"], +.platform-ios input[type="week"], +.platform-ios input[type="number"], +.platform-ios input[type="email"], +.platform-ios input[type="url"], +.platform-ios input[type="tel"], +.platform-ios input[type="color"], +.platform-ios .input-group { + height: 40px; + padding: 10px 15px; + border: 1px solid rgba(0, 0, 0, 0.2); +} +.platform-ios input[type="search"] { + height: 34px; + text-align: center; + background-color: rgba(0, 0, 0, 0.1); + border: 0; + border-radius: 6px; +} +.platform-ios input[type="search"]:focus { + text-align: left; +} +.platform-ios select, +.platform-ios textarea, +.platform-ios .input-group { + height: auto; +} +.platform-ios .input-group { + padding: 0; +} +.platform-ios .input-group input { + border: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; +} +.platform-ios .input-group input:last-child { + background-image: none; +} +.platform-ios .input-row { + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; +} +.platform-ios .input-row:last-child, +.platform-ios .input-row label + input { + background-image: none; } .platform-ios .segmented-control { color: #929292; @@ -1104,6 +1098,9 @@ hr { .platform-ios .popover .bar-nav { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } +.platform-ios .popover .table-view { + border-radius: 12px; +} .platform-ios .modal { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index 9344caf..ebf8075 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -2,14 +2,14 @@ // // Android theme -// The visual and interaction styles for Android +// Visuals and interactions in the style of Android // // -------------------------------------------------- // Variables // -------------------------------------------------- -// Type (Change to Roboto) +// Type $font-family-default: 'Roboto', sans-serif; $font-size-default: 18px; $font-weight: 500; @@ -28,8 +28,8 @@ $positive-color: #99cc00; $negative-color: #ff4444; // Bars -$bar-base-height: 50px; -$bar-tab-height: 50px; +$bar-base-height: 50px; +$bar-tab-height: 50px; // Borders $border-default: 1px solid #b1b1b1; diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 1cd7920..b927ab9 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -2,7 +2,7 @@ // // iOS theme -// The visual and interaction styles from iOS +// Visuals and interactions in the style of iOS // // -------------------------------------------------- @@ -21,8 +21,8 @@ $positive-color: #4cd964; $negative-color: #dd524d; // Bars -$bar-base-height: 44px; -$bar-tab-height: 50px; +$bar-base-height: 44px; +$bar-tab-height: 50px; // iOS style transitions $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods @@ -39,152 +39,6 @@ a { } -// Bars -// -------------------------------------------------- - -.bar { - border-bottom: 0; - background-color: $chrome-color; - @include box-shadow(0 0 1px rgba(0,0,0,.85)); - - // 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 { - border-top: 0; - @include box-shadow(0 0 -1px rgba(0,0,0,.85)); -} -.tab-item { - // Active states for the tab bar - &.active, - &:active { - .tab-label, - .icon { - color: $primary-color; - } - } -} - -// `bar-nav` in popovers -.popover .bar-nav { - border-bottom: 1px solid rgba(0,0,0,.15); -} - - -// Table views -// -------------------------------------------------- - -.table-view { - .table-view-cell { - border-bottom: 0; - @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. - - // Remove the border from the last table view item - &:last-child { - background-image: none; - } - } - // Table view dividers - // -------------------------------------------------- - - .table-view-divider { - border-top: 0; - border-bottom: 0; - @include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset. - } -} - -.popover .table-view { - border-radius: 12px; -} - -.card .table-view li:last-child { - background-image: none; -} - - -// 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); -} - -// Rounded search input -input[type="search"] { - height: 34px; - text-align: center; - background-color: rgba(0,0,0,.1); - border: 0; - border-radius: 6px; -} -input[type="search"]:focus { - text-align: left; -} -select, -textarea, -.input-group { - height: auto; -} - -// Input groups (cluster multiple inputs together into a single group) -// ------------------------------------------------------------------- -.input-group { - padding: 0; -} -.input-group input { - border: 0; - @include hairline(single, #c8c7cc, 15px); -} -// 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: 0; - @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. -} -// Remove bottom border on last input-row to avoid double bottom border -.input-row:last-child, -.input-row label + input { - background-image: none; -} - - // Buttons // -------------------------------------------------- @@ -281,9 +135,65 @@ textarea, } } -// 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 // -------------------------------------------------- +// Default bar +.bar { + border-bottom: 0; + background-color: $chrome-color; + @include box-shadow(0 0 1px rgba(0,0,0,.85)); + + // 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; + } +} + +// Tab bar +.bar-tab { + border-top: 0; + @include box-shadow(0 0 -1px rgba(0,0,0,.85)); +} +.tab-item { + // Active states for the tab bar + &.active, + &:active { + .tab-label, + .icon { + color: $primary-color; + } + } +} + +// Nav bars with buttons .bar-nav { // Link buttons in nav bars .btn-link { @@ -297,7 +207,7 @@ textarea, } -// + // Badges // -------------------------------------------------- @@ -310,8 +220,7 @@ textarea, // Badge modifiers -// -------------------------------------------------- - +// // Main badge .badge-primary { color: #fff; @@ -345,23 +254,108 @@ textarea, } } -// Badges in buttons -.btn { - .badge { - background-color: rgba(0,0,0,.15); - &.badge-inverted { - background-color: transparent; +// Cards +// -------------------------------------------------- + +// Cards with table-views +.card .table-view-cell:last-child { + background-image: none; +} + +// Table views +// -------------------------------------------------- + +.table-view { + .table-view-cell { + border-bottom: 0; + @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. + + // Remove the border from the last table view item + &:last-child { + background-image: none; } } - // Active states - &:active .badge { - color: #fff; + // Table view dividers + .table-view-divider { + border-top: 0; + border-bottom: 0; + @include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset. } } +// 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); +} + +// Rounded search input +input[type="search"] { + height: 34px; + text-align: center; + background-color: rgba(0,0,0,.1); + border: 0; + border-radius: 6px; +} +input[type="search"]:focus { + text-align: left; +} +select, +textarea, +.input-group { + height: auto; +} + +// Input groups (cluster multiple inputs together into a single group) +// ------------------------------------------------------------------- +.input-group { + padding: 0; +} +.input-group input { + border: 0; + @include hairline(single, #c8c7cc, 15px); +} +// 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: 0; + @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. +} +// Remove bottom border on last input-row to avoid double bottom border +.input-row:last-child, +.input-row label + input { + background-image: none; +} + + // // Segmented controllers // -------------------------------------------------- @@ -389,8 +383,7 @@ textarea, } // Other segmented controller types -// -------------------------------------------------- - +// // Primary .segmented-control-primary { border: 1px solid $primary-color; @@ -461,7 +454,6 @@ textarea, } -// // Popovers // -------------------------------------------------- @@ -472,16 +464,24 @@ textarea, &:before { border-bottom: 15px solid $chrome-color; } - .bar { - @include box-shadow(none); - } - .bar-nav { - border-bottom: 1px solid rgba(0,0,0,.15); - } +} + +// Popovers with `bar` +.popover .bar { + @include box-shadow(none); +} + +// Popovers with `bar-nav` +.popover .bar-nav { + border-bottom: 1px solid rgba(0,0,0,.15); +} + +// Popovers with `table-views1 +.popover .table-view { + border-radius: 12px; } -// // Modal styles // -------------------------------------------------- @@ -494,7 +494,7 @@ textarea, } } -// + // Toggles styles // -------------------------------------------------- .toggle { @@ -536,11 +536,9 @@ textarea, } -// // Push styles // -------------------------------------------------- .content { - // Fade animation &.fade { @include transition(opacity .2s ease-in-out);