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

fixing some docs issues

pull/253/head
connors 11 years ago
parent
526378a70c
commit
ee09f4ddbe
18 changed files with 191 additions and 107 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. 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. 33
      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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

33
docs/components.html
Unescape View File

@ -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,12 +1073,10 @@ 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>
<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>

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

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save