diff --git a/dist/android-theme.css b/dist/android-theme.css index 296a92e..1a2687d 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -176,6 +176,14 @@ a:active { .bar.bar-footer-secondary-tab { bottom: 50px; } +.bar .bar-footer, +.bar .bar-footer-secondary, +.bar .bar-footer-secondary-tab { + border-bottom: 0; + border-top: 1px solid #b1b1b1; + -webkit-box-shadow: inset 0 -2px 0 #33b5e5; + box-shadow: inset 0 -2px 0 #33b5e5; +} .bar-tab { top: 0; diff --git a/dist/ios-theme.css b/dist/ios-theme.css index d1d87bc..7047a11 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -131,6 +131,13 @@ p { .bar.bar-footer-secondary-tab { bottom: 50px; } +.bar .bar-footer, +.bar .bar-footer-secondary, +.bar .bar-footer-secondary-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); +} .bar-tab { border-top: 0; diff --git a/dist/ratchet.css b/dist/ratchet.css index bc07cdf..9b9e0ad 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -510,6 +510,13 @@ input[type="button"] { bottom: 50px; } +.bar-footer, +.bar-footer-secondary, +.bar-footer-secondary-tab { + border-bottom: 0; + border-top: 1px solid #dddddd; +} + .bar-nav { top: 0; } @@ -897,7 +904,7 @@ select { font-weight: 400; background-color: white; border: 1px solid #ccc; - border-radius: 4px; + border-radius: 3px; } .segmented-control .control-item { display: table-cell; diff --git a/docs/_includes/jump.html b/docs/_includes/jump.html new file mode 100644 index 0000000..a023db9 --- /dev/null +++ b/docs/_includes/jump.html @@ -0,0 +1,20 @@ + + + Jump to + + + +
+ Bars + Typography + Table views + Buttons + Segmented controls + Badges + Forms + Toggles + Popovers + Modals + Sliders + Push +
\ No newline at end of file diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html deleted file mode 100644 index 695b4ab..0000000 --- a/docs/_includes/nav.html +++ /dev/null @@ -1,25 +0,0 @@ - \ No newline at end of file diff --git a/docs/_includes/toolbar.html b/docs/_includes/toolbar.html index 739d638..d04c043 100644 --- a/docs/_includes/toolbar.html +++ b/docs/_includes/toolbar.html @@ -1,27 +1,7 @@
- - - - Jump to - - - -
- Bars - Typography - Table views - Buttons - Segmented controls - Badges - Forms - Toggles - Popovers - Modals - Sliders - Push -
+ {% include jump.html %}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 88531a7..0fc9335 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -289,90 +289,6 @@ body { margin-top: 5px; } -.docs-benefits { - padding-bottom: 0; - text-align: center; -} - -.benefit-icon { - display: block; - width: 80px; - height: 80px; - margin: 0 auto 30px; - border: 1px solid #eee; - border-radius: 40px; -} -.benefit-icon .icon { - color: #14b9d6; - font-size: 32px; - line-height: 80px; -} -.benefit-icon .icon-download { - margin-top: -2px; -} - -.benefit-heading { - margin-top: 5px 0 10px; - font-weight: 500; - font-size: 24px; -} - -.benefit-text { - margin: 0 0 100px; - font-size: 18px; - color: #777; -} - -.docs-contribute { - padding-top: 50px; - padding-bottom: 50px; - color: #fff; - text-align: center; - background-color: #00d1fe; -} -.docs-contribute .link { - display: inline-block; - margin-top: 5px; - color: #fff; - text-decoration: underline; -} -.docs-contribute .column { - margin-bottom: 40px; -} -.docs-contribute .column:last-child { - margin-bottom: 0; -} - -.contribute-heading, -.contribute-text { - margin-top: 0; -} - -.contribute-heading { - margin-bottom: 5px; - font-size: 18px; - font-weight: 500; -} - -.contribute-text { - margin-bottom: 0; - color: rgba(255, 255, 255, 0.85); -} - -.docs-footer { - padding-top: 20px; - padding-bottom: 20px; - color: rgba(255, 255, 255, 0.7); - text-align: center; - background-color: #254456; -} -.docs-footer .footer-content { - opacity: .7; -} -.docs-footer .footer-content a { - color: #fff; -} - .docs-mini-footer { padding-top: 40px; padding-bottom: 40px; @@ -381,15 +297,15 @@ body { } .docs-component-toolbar { - padding-top: 12px; - padding-bottom: 12px; + padding-top: 8px; + padding-bottom: 8px; position: fixed; top: 0; bottom: auto; left: 0; right: 0; z-index: 20; - height: 52px; + height: 44px; background-color: #fff; border-bottom: 1px solid #ddd; -webkit-transform: translate3d(0, -55px, 0); @@ -408,13 +324,8 @@ body { transform: translate3d(0, 0, 0); } .docs-component-toolbar .segmented-control { - position: absolute; - left: 50%; - width: 300px; - margin: 0; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); + max-width: 300px; + margin: 0 auto; } .docs-component-toolbar .segmented-control .control-item { cursor: pointer; @@ -428,15 +339,22 @@ body { } .component-title { - margin: 0; + margin-bottom: 15px; font-size: 24px; font-weight: 300; } .component-description { - margin: 10px 0; + margin-bottom: 15px; font-size: 16px; } +.component-description code { + padding: 2px 4px; + font-size: 90%; + background-color: #f9f9f9; + white-space: nowrap; + border-radius: 3px; +} .component-example { font-family: "Helvetica Neue", Helvetica, sans-serif; @@ -646,6 +564,8 @@ hr { } .docs-jump-menu { + position: absolute; + left: 20px; display: block; color: #777; cursor: pointer; @@ -845,6 +765,10 @@ hr { .docs-sub-header .carbonad { right: 30px !important; } + + .docs-jump-menu { + left: 30px; + } } .example-device { margin: 0 auto; @@ -1145,6 +1069,13 @@ hr { .platform-ios .bar.bar-footer-secondary-tab { bottom: 50px; } +.platform-ios .bar .bar-footer, +.platform-ios .bar .bar-footer-secondary, +.platform-ios .bar .bar-footer-secondary-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 .bar-tab { border-top: 0; -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); @@ -1598,6 +1529,14 @@ hr { .platform-android .bar.bar-footer-secondary-tab { bottom: 50px; } +.platform-android .bar .bar-footer, +.platform-android .bar .bar-footer-secondary, +.platform-android .bar .bar-footer-secondary-tab { + border-bottom: 0; + border-top: 1px solid #b1b1b1; + -webkit-box-shadow: inset 0 -2px 0 #33b5e5; + box-shadow: inset 0 -2px 0 #33b5e5; +} .platform-android .bar-tab { top: 0; bottom: auto; diff --git a/docs/components.html b/docs/components.html index 04fff25..541aafb 100644 --- a/docs/components.html +++ b/docs/components.html @@ -57,7 +57,7 @@ title: Components · Ratchet

Title bar with buttons

-

Buttons in a title bar are left or right aligned and should be used for actions.

+

Buttons in a title bar are left or right aligned and should be used for actions. Use the .pull-right or .pull-right utility classes to float the buttons. Also, be sure to place any floated elements bofore the title.

@@ -87,6 +87,7 @@ title: Components · Ratchet

Title bar with icons

+

Icons can also be used for actions in toolbars. Again, be sure to use utility classes to float the icons into position.

@@ -108,7 +109,7 @@ title: Components · Ratchet

Title bar with link buttons and icons

-

Buttons in a title bar are left or right aligned and should be used for actions.

+

Link buttons can be used in tool bars to remove the outline. Use these in conjuction with icons to recreate the nav feel from iOS7. Note the use of .btn-nav to bring the buttons a little bit closer to the edge of the viewport.

@@ -180,7 +181,7 @@ title: Components · Ratchet

Tab bar

-

Use Ratchicons in the tab bar to represent different sections of your app.

+

Use Ratchicons in the .tab-bar to represent different sections of your app.

-

The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

+

The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

@@ -1090,7 +1118,7 @@ document
-

The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

+

The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

{% endhighlight %} diff --git a/docs/dist/android-theme.css b/docs/dist/android-theme.css index 296a92e..1a2687d 100644 --- a/docs/dist/android-theme.css +++ b/docs/dist/android-theme.css @@ -176,6 +176,14 @@ a:active { .bar.bar-footer-secondary-tab { bottom: 50px; } +.bar .bar-footer, +.bar .bar-footer-secondary, +.bar .bar-footer-secondary-tab { + border-bottom: 0; + border-top: 1px solid #b1b1b1; + -webkit-box-shadow: inset 0 -2px 0 #33b5e5; + box-shadow: inset 0 -2px 0 #33b5e5; +} .bar-tab { top: 0; diff --git a/docs/dist/ios-theme.css b/docs/dist/ios-theme.css index d1d87bc..7047a11 100644 --- a/docs/dist/ios-theme.css +++ b/docs/dist/ios-theme.css @@ -131,6 +131,13 @@ p { .bar.bar-footer-secondary-tab { bottom: 50px; } +.bar .bar-footer, +.bar .bar-footer-secondary, +.bar .bar-footer-secondary-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); +} .bar-tab { border-top: 0; diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css index bc07cdf..9b9e0ad 100644 --- a/docs/dist/ratchet.css +++ b/docs/dist/ratchet.css @@ -510,6 +510,13 @@ input[type="button"] { bottom: 50px; } +.bar-footer, +.bar-footer-secondary, +.bar-footer-secondary-tab { + border-bottom: 0; + border-top: 1px solid #dddddd; +} + .bar-nav { top: 0; } @@ -897,7 +904,7 @@ select { font-weight: 400; background-color: white; border: 1px solid #ccc; - border-radius: 4px; + border-radius: 3px; } .segmented-control .control-item { display: table-cell; diff --git a/sass/bars.scss b/sass/bars.scss index afe92b4..9e45f08 100644 --- a/sass/bars.scss +++ b/sass/bars.scss @@ -19,7 +19,7 @@ top: $bar-base-height; } -// Modifier class to dock any bar to the bottom of the viewport +// Modifier class for footer bars .bar-footer { bottom: 0; } @@ -34,6 +34,14 @@ bottom: $bar-tab-height; } +// Give the footers the correct border +.bar-footer, +.bar-footer-secondary, +.bar-footer-secondary-tab { + border-bottom: 0; + border-top: $border-default; +} + // Nav bar // -------------------------------------------------- diff --git a/sass/docs.scss b/sass/docs.scss index e1e6998..319cd55 100644 --- a/sass/docs.scss +++ b/sass/docs.scss @@ -285,99 +285,9 @@ body { } -// Benefits -// -------------------------------------------------- - -.docs-benefits { - padding-bottom: 0; - text-align: center; -} -.benefit-icon { - display: block; - width: 80px; - height: 80px; - margin: 0 auto 30px; - border: 1px solid #eee; - border-radius: 40px; - - .icon { - color: #14b9d6; - font-size: 32px; - line-height: 80px; - } - .icon-download { - margin-top: -2px; // Align the icon correctly - } -} -.benefit-heading { - margin-top: 5px 0 10px; - font-weight: 500; - font-size: 24px; -} -.benefit-text { - margin: 0 0 100px; - font-size: 18px; - color: #777; -} - - -// Contribute -// -------------------------------------------------- - -.docs-contribute { - padding-top: 50px; - padding-bottom: 50px; - color: #fff; - text-align: center; - background-color: #00d1fe; - - .link { - display: inline-block; - margin-top: 5px; - color: #fff; - text-decoration: underline; - } - .column { - margin-bottom: 40px; - - &:last-child { - margin-bottom: 0; - } - } -} -.contribute-heading, -.contribute-text { - margin-top: 0; -} -.contribute-heading { - margin-bottom: 5px; - font-size: 18px; - font-weight: 500; -} -.contribute-text { - margin-bottom: 0; - color: rgba(255,255,255,.85); -} - - // Footer // -------------------------------------------------- -.docs-footer { - padding-top: 20px; - padding-bottom: 20px; - color: rgba(255,255,255,.7); - text-align: center; - background-color: #254456; - - .footer-content { - opacity: .7; - - a { - color: #fff; - } - } -} .docs-mini-footer { padding-top: 40px; padding-bottom: 40px; @@ -390,15 +300,15 @@ body { // -------------------------------------------------- .docs-component-toolbar { - padding-top: 12px; - padding-bottom: 12px; + padding-top: 8px; + padding-bottom: 8px; position: fixed; top: 0; bottom: auto; left: 0; right: 0; z-index: 20; - height: 52px; + height: 44px; background-color: #fff; border-bottom: 1px solid #ddd; @include transform(translate3d(0, -55px, 0)); @@ -410,11 +320,8 @@ body { } .segmented-control { - position: absolute; - left: 50%; - width: 300px; - margin: 0; - @include transform(translateX(-50%)); + max-width: 300px; + margin: 0 auto; .control-item { cursor: pointer; @@ -432,13 +339,21 @@ body { border-bottom: 1px solid #ddd; } .component-title { - margin: 0; + margin-bottom: 15px; font-size: 24px; font-weight: 300; } .component-description { - margin: 10px 0; + margin-bottom: 15px; font-size: 16px; + + code { + padding: 2px 4px; + font-size: 90%; + background-color: #f9f9f9; + white-space: nowrap; + border-radius: 3px; + } } .component-example { font-family: $font-family-default; @@ -659,6 +574,8 @@ hr { // Component jump menu .docs-jump-menu { + position: absolute; + left: 20px; display: block; color: #777; cursor: pointer; @@ -858,6 +775,10 @@ hr { .docs-sub-header .carbonad { right: 30px !important; } + // Component jump menu + .docs-jump-menu { + left: 30px; + } } // Example devices diff --git a/sass/segmented-controls.scss b/sass/segmented-controls.scss index 0b0c0c6..543520c 100644 --- a/sass/segmented-controls.scss +++ b/sass/segmented-controls.scss @@ -10,7 +10,7 @@ font-weight: $font-weight-light; background-color: $chrome-color; border: 1px solid #ccc; - border-radius: 4px; + border-radius: 3px; // Section within controller .control-item { diff --git a/sass/theme-android.scss b/sass/theme-android.scss index c3c72b4..b33a4c0 100644 --- a/sass/theme-android.scss +++ b/sass/theme-android.scss @@ -251,6 +251,15 @@ a { &.bar-footer-secondary-tab { bottom: $bar-tab-height; } + + // Give the footers the correct border + .bar-footer, + .bar-footer-secondary, + .bar-footer-secondary-tab { + border-bottom: 0; + border-top: $border-default; + @include box-shadow(inset 0 -2px 0 $primary-color); + } } .bar-tab { top: 0; diff --git a/sass/theme-ios.scss b/sass/theme-ios.scss index e7732e0..b3fc014 100644 --- a/sass/theme-ios.scss +++ b/sass/theme-ios.scss @@ -198,6 +198,13 @@ p { &.bar-footer-secondary-tab { bottom: $bar-tab-height; } + // Give the footers the correct border + .bar-footer, + .bar-footer-secondary, + .bar-footer-secondary-tab { + border-top: 0; + @include box-shadow(0 0 -1px rgba(0,0,0,.85)); + } } // Tab bar