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

writing some of the docs and hooking up the jump menu

pull/253/head
connors 11 years ago
parent
b589f322bd
commit
526378a70c
16 changed files with 206 additions and 275 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      dist/android-theme.css
  2. 7
      dist/ios-theme.css
  3. 9
      dist/ratchet.css
  4. 20
      docs/_includes/jump.html
  5. 25
      docs/_includes/nav.html
  6. 22
      docs/_includes/toolbar.html
  7. 131
      docs/assets/css/docs.css
  8. 86
      docs/components.html
  9. 8
      docs/dist/android-theme.css
  10. 7
      docs/dist/ios-theme.css
  11. 9
      docs/dist/ratchet.css
  12. 10
      sass/bars.scss
  13. 121
      sass/docs.scss
  14. 2
      sass/segmented-controls.scss
  15. 9
      sass/theme-android.scss
  16. 7
      sass/theme-ios.scss

8
dist/android-theme.css vendored
Unescape View File

@ -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;

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

@ -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;

9
dist/ratchet.css vendored
Unescape View File

@ -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;

20
docs/_includes/jump.html
Unescape View File

@ -0,0 +1,20 @@
<span class="docs-jump-menu pull-left js-jump-menu">
<span class="icon icon-list"></span>
Jump to
<span class="icon icon-caret"></span>
</span>
<div class="docs-component-group js-component-group">
<a class="docs-component-item" href="#bars" data-ignore="push">Bars</a>
<a class="docs-component-item" href="#typography" data-ignore="push">Typography</a>
<a class="docs-component-item" href="#table-views" data-ignore="push">Table views</a>
<a class="docs-component-item" href="#buttons" data-ignore="push">Buttons</a>
<a class="docs-component-item" href="#segmentedControls" data-ignore="push">Segmented controls</a>
<a class="docs-component-item" href="#badges" data-ignore="push">Badges</a>
<a class="docs-component-item" href="#forms" data-ignore="push">Forms</a>
<a class="docs-component-item" href="#toggles" data-ignore="push">Toggles</a>
<a class="docs-component-item" href="#popovers" data-ignore="push">Popovers</a>
<a class="docs-component-item" href="#modals" data-ignore="push">Modals</a>
<a class="docs-component-item" href="#sliders" data-ignore="push">Sliders</a>
<a class="docs-component-item" href="#push" data-ignore="push">Push</a>
</div>

25
docs/_includes/nav.html
Unescape View File

@ -1,25 +0,0 @@
<nav class="docs-outer-wrapper docs-masthead">
<div class="docs-inner-wrapper">
<ul class="docs-navigation">
<li class="nav-item"><a href="/getting-started">Getting started</a></li>
<li class="nav-item nav-components">
<a data-ignore="push" class="nav-components-link" href="/components">Components</a>
<ul class="components-list">
<li><a href="#bars">Bars</a></li>
<li><a href="#table-views">Table views</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#segmentedControllers">Segmented controllers</a></li>
<li><a href="#badges">Badges</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#toggles">Toggles</a></li>
<li><a href="#popovers">Popovers</a></li>
<li><a href="#modals">Modals</a></li>
<li><a href="#sliders">Sliders</a></li>
<li><a href="#push">Push</a></li>
</ul>
</li>
<li data-ignore="push" class="nav-item"><a href="http://github.com/maker/ratchet">View on GitHub</a></li>
</ul>
<h1 class="docs-masthead-title">Ratchet</h1>
</div>
</nav>

22
docs/_includes/toolbar.html
Unescape View File

@ -1,27 +1,7 @@
<div class="docs-component-toolbar js-docs-component-toolbar">
<div class="container">
<div class="column units-2">
<span class="docs-jump-menu pull-left js-jump-menu">
<span class="icon icon-list"></span>
Jump to
<span class="icon icon-caret"></span>
</span>
<div class="docs-component-group js-component-group">
<a class="docs-component-item" href="#" data-ignore="push">Bars</a>
<a class="docs-component-item" href="#" data-ignore="push">Typography</a>
<a class="docs-component-item" href="#" data-ignore="push">Table views</a>
<a class="docs-component-item" href="#" data-ignore="push">Buttons</a>
<a class="docs-component-item" href="#" data-ignore="push">Segmented controls</a>
<a class="docs-component-item" href="#" data-ignore="push">Badges</a>
<a class="docs-component-item" href="#" data-ignore="push">Forms</a>
<a class="docs-component-item" href="#" data-ignore="push">Toggles</a>
<a class="docs-component-item" href="#" data-ignore="push">Popovers</a>
<a class="docs-component-item" href="#" data-ignore="push">Modals</a>
<a class="docs-component-item" href="#" data-ignore="push">Sliders</a>
<a class="docs-component-item" href="#" data-ignore="push">Push</a>
</div>
{% include jump.html %}
<div class="segmented-control">
<a class="platform-switch control-item active" data-platform="">

131
docs/assets/css/docs.css
Unescape View File

@ -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;

86
docs/components.html
Unescape View File

@ -57,7 +57,7 @@ title: Components &middot; Ratchet
<article class="component">
<h3 class="component-title">Title bar with buttons</h3>
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions. Use the <code>.pull-right</code> or <code>.pull-right</code> utility classes to float the buttons. Also, be sure to place any floated elements bofore the title.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
@ -87,6 +87,7 @@ title: Components &middot; Ratchet
<article class="component">
<h3 class="component-title">Title bar with icons</h3>
<p class="component-description">Icons can also be used for actions in toolbars. Again, be sure to use utility classes to float the icons into position.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
@ -108,7 +109,7 @@ title: Components &middot; Ratchet
<article class="component">
<h3 class="component-title">Title bar with link buttons and icons</h3>
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
<p class="component-description">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 <code>.btn-nav</code> to bring the buttons a little bit closer to the edge of the viewport.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
@ -180,7 +181,7 @@ title: Components &middot; Ratchet
<article class="component">
<h3 class="component-title">Tab bar</h3>
<p class="component-description">Use Ratchicons in the tab bar to represent different sections of your app.</p>
<p class="component-description">Use Ratchicons in the <code>.tab-bar</code> to represent different sections of your app.</p>
<div class="component-example component-example-fullbleed">
<nav class="bar bar-tab">
@ -237,6 +238,7 @@ title: Components &middot; Ratchet
<article class="component">
<h3 class="component-title">Tab bar (labels only)</h3>
<p class="component-description">If you don't want to use icons, that's okay too. The text will appear larger to use the additional space.</p>
<div class="component-example component-example-fullbleed">
<nav class="bar bar-tab">
@ -271,7 +273,7 @@ title: Components &middot; Ratchet
<article class="component">
<h3 class="component-title">Standard bars</h3>
<p class="component-description">Standard bars are basic fixed elements that can be positioned in 3 places. These can be used to house buttons or segmented controls (see following examples).</p>
<p class="component-description">Standard bars are basic fixed elements that can be positioned in four places. These can be used to house buttons, icons, or segmented controls (see following examples).</p>
<div class="component-example component-example-fullbleed">
<!-- Segmented control in standard bar fixed to top -->
@ -287,6 +289,12 @@ title: Components &middot; Ratchet
<div class="bar bar-standard bar-header-secondary">
<a class="btn btn-block">Block level button</a>
</div>
<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-footer">
<a class="btn btn-block">Block level button</a>
</div>
</div>
{% highlight html %}
@ -303,6 +311,17 @@ title: Components &middot; Ratchet
<div class="bar bar-standard bar-header-secondary">
<a class="btn btn-block">Block level button</a>
</div>
<!-- Block button in standard bar fixed above the footer -->
<div class="bar bar-standard bar-footer-secondary">
<a class="btn btn-block">Block level button</a>
</div>
<!-- Icons in standard bar fixed to the bottom of the screen -->
<div class="bar bar-standard bar-footer">
<a class="icon icon-compose pull-left"></a>
<a class="icon icon-gear pull-right"></a>
</div>
{% endhighlight %}
</article>
@ -310,30 +329,34 @@ title: Components &middot; Ratchet
<!-- Typography -->
<article class="component" id="typography">
<h3 class="component-title">Typography</h3>
<p class="component-description">Use headings and paragraphs to title and describe sections of your app.</p>
<p class="component-description">Use headings and paragraphs to title and describe sections of your app. Apply or wrap elements with <code>.content-padded</code> to give the content space around the screen.</p>
<div class="component-example component-example-fullbleed">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>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.</p>
<div class="content-padded">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>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.</p>
</div>
</div>
{% highlight html %}
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>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.</p>
<div class="content-padded">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>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.</p>
</div>
{% endhighlight %}
</article>
@ -341,7 +364,7 @@ quis nostrud exercitation ullamco.</p>
<!-- Table views -->
<article class="component" id="table-views">
<h3 class="component-title">Table views</h3>
<p class="component-description">Table views can be used for organizing data, showing collections of links or a series of controls.</p>
<p class="component-description">Table views can be used for organizing data, showing collections of links, or a series of controls.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
@ -365,7 +388,7 @@ quis nostrud exercitation ullamco.</p>
<article class="component">
<h3 class="component-title">Table view with chevrons</h3>
<p class="component-description">Chevrons should be used to indicate that the item is linked.</p>
<p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.push-right</code> or <code>.push-left</code> to use a chevron.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
@ -411,6 +434,7 @@ quis nostrud exercitation ullamco.</p>
<article class="component">
<h3 class="component-title">Table view with badges</h3>
<p class="component-description">Badges are a great way of showing data.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
@ -432,6 +456,7 @@ quis nostrud exercitation ullamco.</p>
<article class="component">
<h3 class="component-title">Table view with badges and chevrons</h3>
<p class="component-description">Feel free to use chevrons and badges together. They'll automatically positon themselves correctly.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
@ -483,6 +508,7 @@ quis nostrud exercitation ullamco.</p>
<article class="component">
<h3 class="component-title">Table view with media (images)</h3>
<p class="component-description">Showing media inside table views is easy. This component to perfect for images and text.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
@ -552,6 +578,7 @@ quis nostrud exercitation ullamco.</p>
<article class="component">
<h3 class="component-title">Table view with media (icons)</h3>
<p class="component-description">Ratchicons can also used instead of images.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
@ -689,6 +716,7 @@ quis nostrud exercitation ullamco.</p>
<article class="component">
<h3 class="component-title">Carded table views</h3>
<p class="component-description">Use <code>.card</code> to wrap any content in a padded element.</p>
<div class="component-example">
<div class="card">
@ -816,7 +844,7 @@ quis nostrud exercitation ullamco.</p>
<!-- Segmented Control -->
<article class="component" id="segmentedControls">
<h3 class="component-title">Segmented control</h3>
<p class="component-description">Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "control-content". Then, just give each content section an id and point the link in the segmented control to that id.</p>
<p class="component-description">Content sections that are to be swapped in and out by the controller should all be siblings and have the class <code>.control-content</code>. Then, just give each content section an id and point the link in the segmented control to that id.</p>
<div class="component-example">
<div class="segmented-control">
@ -861,7 +889,7 @@ quis nostrud exercitation ullamco.</p>
<!-- Badges -->
<article class="component" id="badges">
<h3 class="component-title">Badges</h3>
<p class="component-description">Badges come in four flavors and should be used to indicate "how many" of something there are.</p>
<p class="component-description">Badges come in four flavors and should be used to indicate "how many" of something there are. Adding the a class of <code>.badge-inverted</code> will remove the badges background color.</p>
<div class="component-example">
<span class="badge">1</span>
@ -1076,7 +1104,7 @@ document
</header>
<div class="content">
<p>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.</p>
<p class="content-padded">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.</p>
</div>
</div>
</div>
@ -1090,7 +1118,7 @@ document
</header>
<div class="content">
<p>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.</p>
<p class="content-padded">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.</p>
</div>
</div>
{% endhighlight %}

8
docs/dist/android-theme.css vendored
Unescape View File

@ -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;

7
docs/dist/ios-theme.css vendored
Unescape View File

@ -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;

9
docs/dist/ratchet.css vendored
Unescape View File

@ -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;

10
sass/bars.scss
Unescape View File

@ -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
// --------------------------------------------------

121
sass/docs.scss
Unescape View File

@ -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

2
sass/segmented-controls.scss
Unescape View File

@ -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 {

9
sass/theme-android.scss
Unescape View File

@ -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;

7
sass/theme-ios.scss
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save