Browse Source

fixing some docs issues

pull/253/head
connors 11 years ago
parent
commit
ee09f4ddbe
  1. 7
      dist/android-theme.css
  2. 31
      dist/ratchet.css
  3. 6
      dist/ratchet.js
  4. 2
      docs/_includes/footer.html
  5. 75
      docs/assets/css/docs.css
  6. 31
      docs/components.html
  7. 7
      docs/dist/android-theme.css
  8. 31
      docs/dist/ratchet.css
  9. 6
      docs/dist/ratchet.js
  10. 6
      js/push.js
  11. 4
      sass/badges.scss
  12. 11
      sass/bars.scss
  13. 4
      sass/buttons.scss
  14. 61
      sass/docs.scss
  15. 3
      sass/forms.scss
  16. 2
      sass/push.scss
  17. 7
      sass/theme-android.scss
  18. 2
      sass/toggles.scss

7
dist/android-theme.css vendored

@ -218,12 +218,12 @@ a:active {
}
.bar .btn {
margin-top: 7px;
top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.bar .btn-link {
margin-top: 0;
top: 0;
padding: 0;
color: #33b5e5;
font-size: 18px;
@ -236,6 +236,9 @@ a:active {
top: 2px;
padding: 0;
}
.bar .btn-block {
top: 4px;
}
.bar .segmented-control {
top: 7px;

31
dist/ratchet.css vendored

@ -358,7 +358,7 @@ p {
.btn {
position: relative;
display: inline-block;
padding: 5px 8px;
padding: 6px 8px 7px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
@ -455,8 +455,6 @@ input[type="button"] {
.btn .badge {
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, 0.15);
}
@ -574,9 +572,10 @@ input[type="button"] {
.bar .btn {
position: relative;
top: 7px;
z-index: 20;
padding: 6px 12px 7px;
margin-top: 8px;
margin-top: 0;
font-weight: 400;
}
.bar .btn.pull-right {
@ -587,7 +586,7 @@ input[type="button"] {
}
.bar .btn-link {
margin-top: 0;
top: 0;
padding: 0;
font-size: 16px;
color: #428bca;
@ -599,8 +598,8 @@ input[type="button"] {
}
.bar .btn-block {
padding: 7px 0 6px;
margin-top: 5px;
top: 6px;
padding: 7px 0;
margin-bottom: 0;
font-size: 16px;
}
@ -643,14 +642,14 @@ input[type="button"] {
}
.bar .segmented-control {
top: 8px;
top: 7px;
margin: 0 auto;
}
.badge {
display: inline-block;
padding: 2px 9px;
font-size: 13px;
padding: 2px 9px 3px;
font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0, 0, 0, 0.15);
@ -863,6 +862,10 @@ select {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.input-group {
background-color: #fff;
}
.input-group input,
.input-group textarea {
margin-bottom: 0;
@ -1147,7 +1150,7 @@ select {
top: 3px;
right: 11px;
color: #999;
font-size: 14px;
font-size: 13px;
text-transform: uppercase;
content: "Off";
}
@ -1178,7 +1181,7 @@ select {
.content.fade.in {
opacity: 1;
}
.content.slide {
.content.sliding {
z-index: 2;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -webkit-transform 0.4s;
@ -1187,13 +1190,13 @@ select {
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.content.slide.left {
.content.sliding.left {
z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.content.slide.right {
.content.sliding.right {
z-index: 3;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);

6
dist/ratchet.js vendored

@ -396,8 +396,8 @@
if (/slide/.test(transition)) {
swap.classList.add('sliding-in', enter ? 'right' : 'left');
swap.classList.add('slide');
container.classList.add('slide');
swap.classList.add('sliding');
container.classList.add('sliding');
}
container.parentNode.insertBefore(swap, container);
@ -434,7 +434,7 @@
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide', 'sliding-in');
swap.classList.remove('sliding', 'sliding-in');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();

2
docs/_includes/footer.html

@ -1 +1 @@
<p class="docs-mini-footer">Code licensed under the MIT license. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
<p class="docs-mini-footer">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>

75
docs/assets/css/docs.css

@ -92,7 +92,7 @@ body {
z-index: 20;
overflow: hidden;
height: 0;
background-color: rgba(0, 0, 0, 0.95);
background-color: rgba(0, 0, 0, 0.9);
opacity: 0;
}
.docs-nav .docs-nav-group.active {
@ -342,6 +342,7 @@ body {
margin-bottom: 15px;
font-size: 24px;
font-weight: 300;
line-height: 34px;
}
.component-description {
@ -368,19 +369,56 @@ body {
position: relative;
}
.component-example-fullbleed,
.highlight {
margin-left: -15px;
margin-right: -15px;
.component-example .bar {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.component-example .bar.bar-header-secondary {
top: 0 !important;
border-top: 0;
}
.component-example .table-view.inset {
margin-left: 0;
margin-right: 0;
.component-example > .content-padded {
margin: 15px;
}
.component-example .bar-header-secondary {
top: 0;
.component-example > .card {
margin: 15px 0 0;
}
.component-example > .card .control-content {
padding: 15px;
}
.component-example > .btn,
.component-example > .toggle {
margin-bottom: 10px;
}
.component-example .slider {
height: 200px;
}
.component-example .slide img {
width: 100%;
height: 200px;
}
.component-example .slide-text {
position: absolute;
top: 45%;
left: 0;
width: 100%;
color: #fff;
text-align: center;
font-size: 24px;
font-weight: 300;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.component-example-fullbleed,
.highlight {
margin-left: -15px;
margin-right: -15px;
}
.bar-nav ~ .content {
@ -400,6 +438,16 @@ body {
word-wrap: normal;
}
#modals .modal {
left: 0;
z-index: 50;
}
#push .component-example {
height: 150px;
overflow: hidden;
}
#buttonsInDevice .btn,
#buttonsBadgesInDevice .btn {
margin-top: 10px;
@ -1568,12 +1616,12 @@ hr {
text-align: left;
}
.platform-android .bar .btn {
margin-top: 7px;
top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.platform-android .bar .btn-link {
margin-top: 0;
top: 0;
padding: 0;
color: #33b5e5;
font-size: 18px;
@ -1586,6 +1634,9 @@ hr {
top: 2px;
padding: 0;
}
.platform-android .bar .btn-block {
top: 4px;
}
.platform-android .bar .segmented-control {
top: 7px;
}

31
docs/components.html

@ -289,12 +289,6 @@ 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 %}
@ -1011,9 +1005,6 @@ title: Components &middot; Ratchet
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</div>
{% highlight html %}
@ -1040,24 +1031,6 @@ document
<article class="component" id="popovers">
<h3 class="component-title">Popovers</h3>
<div class="component-example">
<div id="popover" class="popover">
<header class="bar bar-nav">
<h3 class="title">Popover title</h3>
</header>
<ul class="table-view">
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell">Item4</li>
<li class="table-view-cell">Item5</li>
<li class="table-view-cell">Item6</li>
<li class="table-view-cell">Item7</li>
<li class="table-view-cell">Item8</li>
</ul>
</div>
</div>
{% highlight html %}
<div id="popover" class="popover">
<header class="bar bar-nav">
@ -1100,14 +1073,12 @@ document
<div id="myModalexample" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Modal</h1>
<h1 class="title">Modal mobile</h1>
</header>
<div class="content">
<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>
{% highlight html %}
<a href="#myModalexample" class="btn">Open modal</a>

7
docs/dist/android-theme.css vendored

@ -218,12 +218,12 @@ a:active {
}
.bar .btn {
margin-top: 7px;
top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.bar .btn-link {
margin-top: 0;
top: 0;
padding: 0;
color: #33b5e5;
font-size: 18px;
@ -236,6 +236,9 @@ a:active {
top: 2px;
padding: 0;
}
.bar .btn-block {
top: 4px;
}
.bar .segmented-control {
top: 7px;

31
docs/dist/ratchet.css vendored

@ -358,7 +358,7 @@ p {
.btn {
position: relative;
display: inline-block;
padding: 5px 8px;
padding: 6px 8px 7px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
@ -455,8 +455,6 @@ input[type="button"] {
.btn .badge {
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, 0.15);
}
@ -574,9 +572,10 @@ input[type="button"] {
.bar .btn {
position: relative;
top: 7px;
z-index: 20;
padding: 6px 12px 7px;
margin-top: 8px;
margin-top: 0;
font-weight: 400;
}
.bar .btn.pull-right {
@ -587,7 +586,7 @@ input[type="button"] {
}
.bar .btn-link {
margin-top: 0;
top: 0;
padding: 0;
font-size: 16px;
color: #428bca;
@ -599,8 +598,8 @@ input[type="button"] {
}
.bar .btn-block {
padding: 7px 0 6px;
margin-top: 5px;
top: 6px;
padding: 7px 0;
margin-bottom: 0;
font-size: 16px;
}
@ -643,14 +642,14 @@ input[type="button"] {
}
.bar .segmented-control {
top: 8px;
top: 7px;
margin: 0 auto;
}
.badge {
display: inline-block;
padding: 2px 9px;
font-size: 13px;
padding: 2px 9px 3px;
font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0, 0, 0, 0.15);
@ -863,6 +862,10 @@ select {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.input-group {
background-color: #fff;
}
.input-group input,
.input-group textarea {
margin-bottom: 0;
@ -1147,7 +1150,7 @@ select {
top: 3px;
right: 11px;
color: #999;
font-size: 14px;
font-size: 13px;
text-transform: uppercase;
content: "Off";
}
@ -1178,7 +1181,7 @@ select {
.content.fade.in {
opacity: 1;
}
.content.slide {
.content.sliding {
z-index: 2;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -webkit-transform 0.4s;
@ -1187,13 +1190,13 @@ select {
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.content.slide.left {
.content.sliding.left {
z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.content.slide.right {
.content.sliding.right {
z-index: 3;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);

6
docs/dist/ratchet.js vendored

@ -405,8 +405,8 @@
if (/slide/.test(transition)) {
swap.classList.add('sliding-in', enter ? 'right' : 'left');
swap.classList.add('slide');
container.classList.add('slide');
swap.classList.add('sliding');
container.classList.add('sliding');
}
container.parentNode.insertBefore(swap, container);
@ -443,7 +443,7 @@
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide', 'sliding-in');
swap.classList.remove('sliding', 'sliding-in');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();

6
js/push.js

@ -287,8 +287,8 @@
if (/slide/.test(transition)) {
swap.classList.add('sliding-in', enter ? 'right' : 'left');
swap.classList.add('slide');
container.classList.add('slide');
swap.classList.add('sliding');
container.classList.add('sliding');
}
container.parentNode.insertBefore(swap, container);
@ -325,7 +325,7 @@
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide', 'sliding-in');
swap.classList.remove('sliding', 'sliding-in');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();

4
sass/badges.scss

@ -4,8 +4,8 @@
.badge {
display: inline-block;
padding: 2px 9px;
font-size: 13px;
padding: 2px 9px 3px;
font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0,0,0,.15);

11
sass/bars.scss

@ -124,9 +124,10 @@
.bar .btn {
position: relative;
top: 7px;
z-index: 20; // Position the buttons on top of .title
padding: 6px 12px 7px;
margin-top: 8px;
margin-top: 0;
font-weight: $font-weight-light;
// Give buttons that are floated left and right side margin
@ -140,7 +141,7 @@
// Bars with link buttons (Line the text up with content)
.bar .btn-link {
margin-top: 0;
top: 0;
padding: 0;
font-size: 16px;
color: $primary-color;
@ -157,8 +158,8 @@
//
// Add proper padding
.bar .btn-block {
padding: 7px 0 6px;
margin-top: 5px;
top: 6px;
padding: 7px 0;
margin-bottom: 0;
font-size: 16px; // Scale down font size to fit in bar.
}
@ -230,6 +231,6 @@
// Position the control correctly inside a bar.
.bar .segmented-control {
top: 8px;
top: 7px;
margin: 0 auto;
}

4
sass/buttons.scss

@ -5,7 +5,7 @@
.btn {
position: relative;
display: inline-block;
padding: 5px 8px;
padding: 6px 8px 7px;
margin-bottom: 0; // For input.btn
font-size: $button-font-size;
font-weight: $font-weight-light;
@ -139,8 +139,6 @@ input[type="button"] {
// Generic styles for all badges within default buttons
.btn .badge {
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
margin: -2px -4px -2px 4px;
background-color: rgba(0,0,0,.15);
}

61
sass/docs.scss

@ -90,7 +90,7 @@ body {
z-index: 20;
overflow: hidden;
height: 0;
background-color: rgba(0,0,0,.95);
background-color: rgba(0,0,0,.9);
opacity: 0;
&.active {
@ -342,6 +342,7 @@ body {
margin-bottom: 15px;
font-size: 24px;
font-weight: 300;
line-height: 34px;
}
.component-description {
margin-bottom: 15px;
@ -365,18 +366,52 @@ body {
.component-example .content {
position: relative;
}
.component-example .bar {
border-top: $border-default;
border-bottom: $border-default;
&.bar-header-secondary {
top: 0 !important;
border-top: 0;
}
}
.component-example > .content-padded {
margin: 15px;
}
.component-example > .card {
margin: 15px 0 0;
.control-content {
padding: 15px;
}
}
.component-example > .btn,
.component-example > .toggle {
margin-bottom: 10px;
}
.component-example .slider {
height: 200px;
}
.component-example .slide img {
width: 100%;
height: 200px;
}
.component-example .slide-text {
position: absolute;
top: 45%;
left: 0;
width: 100%;
color: #fff;
text-align: center;
font-size: 24px;
font-weight: 300;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.component-example-fullbleed,
.highlight {
margin-left: -15px;
margin-right: -15px;
}
.component-example .table-view.inset {
margin-left: 0;
margin-right: 0;
}
.component-example .bar-header-secondary {
top: 0;
}
.bar-nav ~ .content {
padding: 0;
}
@ -392,6 +427,16 @@ body {
white-space: pre;
word-wrap: normal;
}
// Modals
#modals .modal {
left: 0;
z-index: 50;
}
// Push
#push .component-example {
height: 150px;
overflow: hidden;
}
// Buttons
#buttonsInDevice,

3
sass/forms.scss

@ -69,6 +69,9 @@ select {
// -------------------------------------------------------------------
// Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input
.input-group {
background-color: #fff;
}
.input-group input,
.input-group textarea {
margin-bottom: 0;

2
sass/push.scss

@ -14,7 +14,7 @@
}
// Slide animation
&.slide {
&.sliding {
z-index: 2;
@include transition(-webkit-transform .4s);
@include transform(translate3d(0, 0, 0));

7
sass/theme-android.scss

@ -300,12 +300,12 @@ a {
// Bars with buttons
.bar {
.btn {
margin-top: 7px;
top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.btn-link {
margin-top: 0;
top: 0;
padding: 0;
color: $primary-color;
font-size: $font-size-default;
@ -322,6 +322,9 @@ a {
padding: 0;
}
}
.btn-block {
top: 4px;
}
}
// Bars with segmented-controls

2
sass/toggles.scss

@ -32,7 +32,7 @@
top: 3px;
right: 11px;
color: #999;
font-size: 14px;
font-size: 13px;
text-transform: uppercase;
content: "Off";
}

Loading…
Cancel
Save