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

Merge pull request #349 from twbs/docs-refactor 

Docs css reorg
pull/350/head
Connor Sears 11 years ago
parent
8dbbbe503d f3cb626bc7
commit
64eca23545
3 changed files with 675 additions and 654 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 639
      docs/assets/css/docs.css
  2. 2
      docs/index.html
  3. 676
      sass/docs.scss

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

@ -28,26 +28,13 @@ body {
position: relative; position: relative;
background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%); background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
} }
.docs-header:before,
.docs-sub-header:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: url(../img/pattern.png);
background-size: 30%;
background-position: center center;
opacity: .038;
}
.docs-header { .docs-header {
height: 100vh; height: 100vh;
min-height: 700px; min-height: 750px;
} }
.docs-header .carbonad { .docs-header .carbonad {
position: absolute !important; position: relative !important;
bottom: 180px !important;
margin-top: 0 !important; margin-top: 0 !important;
-webkit-animation-name: fadeintext; -webkit-animation-name: fadeintext;
-moz-animation-name: fadeintext; -moz-animation-name: fadeintext;
@ -62,6 +49,38 @@ body {
text-align: center; text-align: center;
} }
.docs-header-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
@media screen and (min-width: 768px) {
.docs-header {
min-height: 870px;
}
.docs-header .carbonad {
left: 50% !important;
margin-left: -165px !important;
margin-bottom: 60px !important;
}
.docs-sub-header .carbonad {
position: absolute !important;
top: 50% !important;
right: 15px !important;
margin-top: 0 !important;
-webkit-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
}
}
@media screen and (min-width: 1200px) {
.docs-sub-header .carbonad {
right: 30px !important;
}
}
.docs-masthead { .docs-masthead {
position: relative; position: relative;
padding-top: 15px; padding-top: 15px;
@ -129,9 +148,113 @@ body {
opacity: .5; opacity: .5;
} }
@media screen and (min-width: 768px) {
.docs-title {
position: static;
float: left;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.docs-nav {
float: right;
}
.docs-nav .docs-nav-trigger {
display: none;
}
.docs-nav .docs-nav-group {
position: static;
display: block;
height: auto;
background-color: transparent;
opacity: 1;
}
.docs-nav .docs-nav-item {
position: relative;
display: inline-block;
padding: 0 15px;
font-size: 14px;
}
.docs-jump-menu {
position: absolute;
left: 20px;
display: block;
color: #777;
cursor: pointer;
-webkit-transition: opacity 0.2 linear;
-moz-transition: opacity 0.2 linear;
transition: opacity 0.2 linear;
}
.docs-jump-menu:hover {
color: #428bca;
}
.docs-jump-menu:active {
opacity: .5;
}
.docs-jump-menu .icon-list {
font-size: 16px;
margin-right: 3px;
}
.docs-jump-menu .icon-caret {
position: relative;
top: 4px;
}
.docs-component-group {
position: absolute;
top: 35px;
left: 30px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.docs-component-group.active {
display: block;
}
.docs-component-group:before, .docs-component-group:after {
position: absolute;
left: 30px;
width: 0;
height: 0;
content: '';
}
.docs-component-group:before {
top: -11px;
margin-left: -11px;
border-right: 11px solid transparent;
border-bottom: 11px solid rgba(0, 0, 0, 0.3);
border-left: 11px solid transparent;
}
.docs-component-group:after {
top: -10px;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
.docs-component-group .docs-component-item {
display: block;
padding: 10px 20px;
color: #777;
}
.docs-component-group .docs-component-item:hover {
color: #fff;
background-color: #428bca;
}
}
@media screen and (min-width: 1200px) {
.docs-jump-menu {
left: 30px;
}
}
.docs-header-content { .docs-header-content {
position: relative; position: relative;
top: 30px;
text-align: center; text-align: center;
padding: 50px 10px; padding: 50px 10px;
-webkit-animation-name: fadeintext; -webkit-animation-name: fadeintext;
@ -171,6 +294,23 @@ body {
line-height: 38px; line-height: 38px;
} }
@media screen and (min-width: 768px) {
.docs-header-content {
top: 30%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.docs-header-content .btn {
display: inline-block;
}
.docs-subtitle {
margin-bottom: 30px;
font-size: 41px;
line-height: 60px;
}
}
.carbonad { .carbonad {
width: 100% !important; width: 100% !important;
height: auto !important; height: auto !important;
@ -216,6 +356,15 @@ body {
display: none; display: none;
} }
@media screen and (min-width: 768px) {
.carbonad {
width: 330px !important;
border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 3px !important;
}
}
.docs-sub-content { .docs-sub-content {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -240,6 +389,12 @@ body {
opacity: .7; opacity: .7;
} }
@media screen and (min-width: 768px) {
.docs-sub-content {
margin-right: 380px;
text-align: left;
}
}
.docs-section { .docs-section {
padding-top: 80px; padding-top: 80px;
padding-bottom: 80px; padding-bottom: 80px;
@ -262,6 +417,17 @@ body {
font-weight: 100; font-weight: 100;
} }
@media screen and (min-width: 768px) {
.section-heading {
margin-top: 50px;
margin-bottom: 10px;
font-size: 40px;
}
.section-lead {
font-size: 24px;
}
}
.docs-steps { .docs-steps {
margin-top: 20px; margin-top: 20px;
padding: 0; padding: 0;
@ -290,6 +456,23 @@ body {
font-size: 14px; font-size: 14px;
} }
@media screen and (min-width: 768px) {
.step-title {
font-size: 24px;
}
.step-title code {
font-size: 18px;
}
.step-description {
font-size: 18px;
}
.docs-module {
margin-top: 35px;
}
}
.docs-module { .docs-module {
margin-top: 20px; margin-top: 20px;
padding: 20px; padding: 20px;
@ -314,8 +497,7 @@ body {
.docs-footer { .docs-footer {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
margin-top: 50px; margin-top: 50px;
padding-top: 30px; padding: 30px 20px;
padding-bottom: 30px;
color: #777; color: #777;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
@ -333,6 +515,11 @@ body {
.docs-footer .social .twitter-follow-button { .docs-footer .social .twitter-follow-button {
margin-top: 5px; margin-top: 5px;
} }
@media screen and (min-width: 768px) {
.docs-footer .social .twitter-follow-button {
margin-top: 0;
}
}
.docs-footer-text { .docs-footer-text {
margin-top: 0; margin-top: 0;
@ -343,6 +530,8 @@ body {
.docs-footer-text { .docs-footer-text {
width: 550px; width: 550px;
margin: 0 auto; margin: 0 auto;
padding-left: 0;
padding-right: 0;
} }
} }
.docs-footer-links { .docs-footer-links {
@ -355,10 +544,6 @@ body {
} }
.docs-header .docs-footer { .docs-header .docs-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-top: 0; margin-top: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1);
} }
@ -444,6 +629,19 @@ body {
height: auto; height: auto;
} }
@media screen and (min-width: 768px) {
.docs-example-group .example-wrap {
display: inline-block;
}
.docs-example-group .example-wrap .example {
width: 180px;
}
}
@media screen and (min-width: 1200px) {
.docs-example-group .example-wrap .example {
width: 220px;
}
}
code { code {
padding: 2px 4px; padding: 2px 4px;
font-size: 90%; font-size: 90%;
@ -555,31 +753,62 @@ code {
word-wrap: normal; word-wrap: normal;
} }
#ratchicons .icon, @media screen and (min-width: 768px) {
#ratchiconsInDevice .icon { .component,
width: 50px; .component-example-fullbleed,
height: 50px; .highlight {
margin: 3px; margin-left: 0;
font-size: 24px; margin-right: 0;
line-height: 50px; }
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
}
#modals .modal {
left: 0;
z-index: 50;
}
#push .component-example { .component {
height: 150px; padding-left: 0;
overflow: hidden; padding-right: 0;
opacity: .3;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.component.active {
opacity: 1;
}
.component-example {
display: none;
}
.highlight pre {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-radius: 3px;
}
}
#ratchicons .icon,
#ratchiconsInDevice .icon {
width: 50px;
height: 50px;
margin: 3px;
font-size: 24px;
line-height: 50px;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
}
#modals .modal {
left: 0;
z-index: 50;
}
#push .component-example {
height: 150px;
overflow: hidden;
} }
#buttonsInDevice .btn, #buttonsInDevice .btn,
#buttonsBadgesInDevice .btn { #buttonsBadgesInDevice .btn,
#buttonsWithIconsInDevice .btn {
margin-top: 10px; margin-top: 10px;
margin-right: 100px; margin-right: 100px;
margin-left: 10px; margin-left: 10px;
@ -627,227 +856,45 @@ code {
content: ''; content: '';
} }
#modalsInDevice #iwindow > .btn {
margin: 10px;
}
.device {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
line-height: 21px;
display: none;
}
hr {
height: 0;
margin: 10px 0 30px;
border: solid #ddd;
border-width: 1px 0 0;
clear: both;
}
.column-group {
*zoom: 1;
}
.column-group:before,
.column-group:after {
display: table;
line-height: 0;
content: "";
}
.column-group:after {
clear: both;
}
.clear {
display: block;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
clear: both;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.docs-header { .popover {
min-height: 870px; position: absolute;
}
.docs-header .carbonad {
bottom: 259px !important;
left: 50% !important;
margin-left: -165px !important;
}
.docs-sub-header .carbonad {
position: absolute !important;
top: 50% !important;
right: 15px !important;
margin-top: 0 !important;
-webkit-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
}
.docs-sub-content {
margin-right: 380px;
text-align: left;
}
.docs-title {
position: static;
float: left;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.docs-header-content {
top: 30%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.docs-header-content .btn {
display: inline-block;
}
.docs-subtitle {
margin-bottom: 30px;
font-size: 41px;
line-height: 60px;
}
.docs-nav {
float: right;
}
.docs-nav .docs-nav-trigger {
display: none;
}
.docs-nav .docs-nav-group {
position: static;
display: block; display: block;
height: auto; top: 72px;
background-color: transparent;
opacity: 1; opacity: 1;
} }
.docs-nav .docs-nav-item { }
position: relative; #modalsInDevice #iwindow > .btn {
display: inline-block; margin: 10px;
padding: 0 15px; }
font-size: 14px;
}
.docs-jump-menu { @media screen and (min-width: 768px) {
position: absolute; .slider .slide img {
left: 20px; width: 100%;
height: 570px;
display: block; display: block;
color: #777;
cursor: pointer;
-webkit-transition: opacity 0.2 linear;
-moz-transition: opacity 0.2 linear;
transition: opacity 0.2 linear;
}
.docs-jump-menu:hover {
color: #428bca;
}
.docs-jump-menu:active {
opacity: .5;
}
.docs-jump-menu .icon-list {
font-size: 16px;
margin-right: 3px;
}
.docs-jump-menu .icon-caret {
position: relative;
top: 4px;
} }
.docs-component-group { .slider .slide-group .slide-text {
position: absolute;
top: 35px;
left: 30px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.docs-component-group.active {
display: block;
}
.docs-component-group:before, .docs-component-group:after {
position: absolute; position: absolute;
left: 30px; top: 45%;
width: 0; left: 0;
height: 0; width: 100%;
content: '';
}
.docs-component-group:before {
top: -11px;
margin-left: -11px;
border-right: 11px solid transparent;
border-bottom: 11px solid rgba(0, 0, 0, 0.3);
border-left: 11px solid transparent;
}
.docs-component-group:after {
top: -10px;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
.docs-component-group .docs-component-item {
display: block;
padding: 10px 20px;
color: #777;
}
.docs-component-group .docs-component-item:hover {
color: #fff; color: #fff;
background-color: #428bca; text-align: center;
}
.carbonad {
width: 330px !important;
border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 3px !important;
}
.docs-footer .social .twitter-follow-button {
margin-top: 0;
}
.step-title {
font-size: 24px;
}
.step-title code {
font-size: 18px;
}
.step-description {
font-size: 18px;
}
.docs-module {
margin-top: 35px;
}
.section-heading {
margin-top: 50px;
margin-bottom: 10px;
font-size: 40px;
}
.section-lead {
font-size: 24px; font-size: 24px;
font-weight: 300;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
} }
}
.device {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
line-height: 21px;
display: none;
}
@media screen and (min-width: 768px) {
.device { .device {
position: relative; position: relative;
top: 50px; top: 50px;
@ -892,85 +939,35 @@ hr {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.component,
.component-example-fullbleed,
.highlight {
margin-left: 0;
margin-right: 0;
}
.component {
padding-left: 0;
padding-right: 0;
opacity: .3;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.component.active {
opacity: 1;
}
.component-example {
display: none;
}
.highlight pre {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-radius: 3px;
}
.popover {
position: absolute;
display: block;
top: 72px;
opacity: 1;
}
.slider .slide img {
width: 100%;
height: 570px;
display: block;
}
.slider .slide-group .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);
}
.docs-example-group .example-wrap {
display: inline-block;
}
.docs-example-group .example-wrap .example {
width: 180px;
}
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
.device { .device {
margin-left: 39px; margin-left: 39px;
} }
}
hr {
height: 0;
margin: 10px 0 30px;
border: solid #ddd;
border-width: 1px 0 0;
clear: both;
}
.docs-sub-header .carbonad { .column-group {
right: 30px !important; *zoom: 1;
} }
.docs-jump-menu { .column-group:before,
left: 30px; .column-group:after {
} display: table;
line-height: 0;
content: "";
}
.docs-example-group .example-wrap .example { .column-group:after {
width: 220px; clear: both;
}
} }
.container { .container {
position: relative; position: relative;
margin-left: auto; margin-left: auto;

2
docs/index.html
Unescape View File

@ -11,6 +11,8 @@ title: Ratchet
<p class="version">Currently v2.0.0</p> <p class="version">Currently v2.0.0</p>
</div> </div>
<div class="docs-header-bottom">
{% include ad.html %} {% include ad.html %}
{% include footer.html %} {% include footer.html %}
</div>
</div> </div>

676
sass/docs.scss
Unescape View File

@ -28,28 +28,14 @@ body {
.docs-sub-header { .docs-sub-header {
position: relative; position: relative;
background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%); background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);
&:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: url(../img/pattern.png);
background-size: 30%;
background-position: center center;
opacity: .038;
// content: '';
}
} }
.docs-header { .docs-header {
height: 100vh; height: 100vh;
min-height: 700px; min-height: 750px;
// Ad on the homepage // Ad on the homepage
.carbonad { .carbonad {
position: absolute !important; position: relative !important;
bottom: 180px !important;
margin-top: 0 !important; margin-top: 0 !important;
@include animation-name(fadeintext); @include animation-name(fadeintext);
@include animation-duration(2s); @include animation-duration(2s);
@ -60,8 +46,42 @@ body {
text-align: center; text-align: center;
} }
} }
.docs-header-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
// Desktop jumbotron
@media screen and (min-width: 768px) {
.docs-header {
min-height: 870px;
// Ads on the homepage
.carbonad {
left: 50% !important;
margin-left: -165px !important;
margin-bottom: 60px !important;
}
}
// Positon ads correctly on sub pages
.docs-sub-header .carbonad {
position: absolute !important;
top: 50% !important;
right: 15px !important;
margin-top: 0 !important;
@include transform(translateY(-50%) !important);
}
}
// Account for the extra margin for large sceens.
@media screen and (min-width: 1200px) {
.docs-sub-header .carbonad {
right: 30px !important;
}
}
// Masthead // Masthead and nav
.docs-masthead { .docs-masthead {
position: relative; position: relative;
padding-top: 15px; padding-top: 15px;
@ -124,9 +144,121 @@ body {
opacity: .5; opacity: .5;
} }
} }
// Desktop: Masthead and nav
@media screen and (min-width: 768px) {
.docs-title {
position: static;
float: left;
@include transform(translateX(0));
}
// Docs nav
.docs-nav {
float: right;
.docs-nav-trigger {
display: none;
}
.docs-nav-group {
position: static;
display: block;
height: auto;
background-color: transparent;
opacity: 1;
}
.docs-nav-item {
position: relative;
display: inline-block;
padding: 0 15px;
font-size: 14px;
}
}
// Component jump menu
.docs-jump-menu {
position: absolute;
left: 20px;
display: block;
color: #777;
cursor: pointer;
@include transition(opacity .2 linear);
&:hover {
color: $primary-color;
}
&:active {
opacity: .5;
}
.icon-list {
font-size: 16px;
margin-right: 3px;
}
.icon-caret {
position: relative;
top: 4px;
}
}
.docs-component-group {
position: absolute;
top: 35px;
left: 30px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: 3px;
box-shadow: 0 0 8px rgba(0,0,0,.05);
&.active {
display: block;
}
&:before,
&:after {
position: absolute;
left: 30px;
width: 0;
height: 0;
content: '';
}
&:before {
top: -11px;
margin-left: -11px;
border-right: 11px solid transparent;
border-bottom: 11px solid rgba(0,0,0,.3);
border-left: 11px solid transparent;
}
&:after {
top: -10px;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent
}
.docs-component-item {
display: block;
padding: 10px 20px;
color: #777;
&:hover {
color: #fff;
background-color: $primary-color;
}
}
}
}
// Account for extra margin on large screens
@media screen and (min-width: 1200px) {
.docs-jump-menu {
left: 30px;
}
}
// Main homepage header content
// "Build mobile apps using simple..."
.docs-header-content { .docs-header-content {
position: relative; position: relative;
top: 30px;
text-align: center; text-align: center;
padding: 50px 10px; padding: 50px 10px;
@include animation-name(fadeintext); @include animation-name(fadeintext);
@ -160,6 +292,23 @@ body {
line-height: 38px; line-height: 38px;
} }
// Desktop header content
@media screen and (min-width: 768px) {
.docs-header-content {
top: 30%;
@include transform(translateY(-50%));
.btn {
display: inline-block;
}
}
.docs-subtitle {
margin-bottom: 30px;
font-size: 41px;
line-height: 60px;
}
}
// Ads // Ads
.carbonad { .carbonad {
width: 100% !important; width: 100% !important;
@ -200,6 +349,18 @@ body {
display: none; display: none;
} }
// Desktop styles for ads
@media screen and (min-width: 768px) {
.carbonad {
width: 330px !important;
border-right: 1px solid rgba(255,255,255,.1) !important;
border-bottom: 1px solid rgba(255,255,255,.1) !important;
border-left: 1px solid rgba(255,255,255,.1) !important;
border-radius: 3px !important;
}
}
// Subpage Header // Subpage Header
// -------------------------------------------------- // --------------------------------------------------
@ -228,9 +389,18 @@ body {
} }
} }
// Desktop: Left align the text
@media screen and (min-width: 768px) {
.docs-sub-content {
margin-right: 380px;
text-align: left;
}
}
// Content sections // Content sections
// -------------------------------------------------- // --------------------------------------------------
.docs-section { .docs-section {
padding-top: 80px; padding-top: 80px;
padding-bottom: 80px; padding-bottom: 80px;
@ -250,6 +420,19 @@ body {
font-weight: 100; font-weight: 100;
} }
// Desktop: Section headings
@media screen and (min-width: 768px) {
.section-heading {
margin-top: 50px;
margin-bottom: 10px;
font-size: 40px;
}
.section-lead {
font-size: 24px;
}
}
// Steps // Steps
// -------------------------------------------------- // --------------------------------------------------
@ -276,6 +459,24 @@ body {
font-size: 14px; font-size: 14px;
} }
// Desktop steps styles
@media screen and (min-width: 768px) {
.step-title {
font-size: 24px;
}
.step-title code {
font-size: 18px;
}
.step-description {
font-size: 18px;
}
// Docs modules
.docs-module {
margin-top: 35px;
}
}
// Docs modules // Docs modules
.docs-module { .docs-module {
margin-top: 20px; margin-top: 20px;
@ -304,8 +505,7 @@ body {
.docs-footer { .docs-footer {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
margin-top: 50px; margin-top: 50px;
padding-top: 30px; padding: 30px 20px;
padding-bottom: 30px;
color: #777; color: #777;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
@ -324,6 +524,12 @@ body {
margin-top: 5px; margin-top: 5px;
} }
} }
@media screen and (min-width: 768px) {
// Remove the top margin on desktop
.social .twitter-follow-button {
margin-top: 0;
}
}
} }
.docs-footer-text { .docs-footer-text {
margin-top: 0; margin-top: 0;
@ -333,6 +539,8 @@ body {
.docs-footer-text { .docs-footer-text {
width: 550px; width: 550px;
margin: 0 auto; margin: 0 auto;
padding-left: 0;
padding-right: 0;
} }
} }
.docs-footer-links { .docs-footer-links {
@ -347,10 +555,6 @@ body {
// Overrides for the homepage's footer // Overrides for the homepage's footer
.docs-header .docs-footer { .docs-header .docs-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-top: 0; margin-top: 0;
border-top: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.1);
@ -370,6 +574,7 @@ body {
overflow: hidden; overflow: hidden;
} }
// Platform toggle // Platform toggle
// -------------------------------------------------- // --------------------------------------------------
@ -405,6 +610,7 @@ body {
} }
} }
// Example devices // Example devices
// -------------------------------------------------- // --------------------------------------------------
@ -441,9 +647,22 @@ body {
} }
} }
} }
// .example-device { @media screen and (min-width: 768px) {
// margin: 0 auto; // Examples
// } .docs-example-group .example-wrap {
display: inline-block;
.example {
width: 180px;
}
}
}
@media screen and (min-width: 1200px) {
.docs-example-group .example-wrap .example {
width: 220px;
}
}
// Components // Components
// -------------------------------------------------- // --------------------------------------------------
@ -546,20 +765,49 @@ code {
white-space: pre; white-space: pre;
word-wrap: normal; word-wrap: normal;
} }
#ratchicons .icon, @media screen and (min-width: 768px) {
#ratchiconsInDevice .icon { .component,
width: 50px; .component-example-fullbleed,
height: 50px; .highlight {
margin: 3px; margin-left: 0;
font-size: 24px; margin-right: 0;
line-height: 50px; }
text-align: center; .component {
background-color: #fff; padding-left: 0;
border: 1px solid #ddd; padding-right: 0;
border-radius: 25px; opacity: .3;
} @include transition(opacity .2s ease-in-out);
// Modals
#modals .modal { &.active {
opacity: 1;
}
}
.component-example {
display: none;
}
.highlight pre {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-radius: 3px;
}
}
// Specific example overrides
#ratchicons .icon,
#ratchiconsInDevice .icon {
width: 50px;
height: 50px;
margin: 3px;
font-size: 24px;
line-height: 50px;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
}
// Modals
#modals .modal {
left: 0; left: 0;
z-index: 50; z-index: 50;
} }
@ -571,7 +819,8 @@ code {
// Buttons // Buttons
#buttonsInDevice, #buttonsInDevice,
#buttonsBadgesInDevice { #buttonsBadgesInDevice,
#buttonsWithIconsInDevice {
.btn { .btn {
margin-top: 10px; margin-top: 10px;
margin-right: 100px; margin-right: 100px;
@ -630,6 +879,14 @@ code {
content: ''; content: '';
} }
} }
@media screen and (min-width: 768px) {
.popover {
position: absolute;
display: block;
top: 72px;
opacity: 1;
}
}
// Modals // Modals
#modalsInDevice { #modalsInDevice {
@ -638,232 +895,37 @@ code {
} }
} }
// Misc // Sliders
// --------------------------------------------------
.device {
font-family: $font-family-default;
font-size: $font-size-default;
line-height: $line-height-default;
display: none;
}
hr {
height: 0;
margin: 10px 0 30px;
border: solid #ddd;
border-width: 1px 0 0;
clear: both;
}
.column-group {
*zoom: 1;
}
.column-group:before,
.column-group:after {
display: table;
line-height: 0;
content: "";
}
.column-group:after {
clear: both;
}
// You can also use a <br class="clear">
.clear {
display: block;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
clear: both;
}
// Docs media queries
// --------------------------------------------------
// Tablet to desktop
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.docs-header { .slider .slide img {
min-height: 870px; width: 100%;
height: 570px; // Fullscreen fun times
// Ads on the homepage
.carbonad {
bottom: 259px !important;
left: 50% !important;
margin-left: -165px !important;
}
}
.docs-sub-header .carbonad {
position: absolute !important;
top: 50% !important;
right: 15px !important;
margin-top: 0 !important;
@include transform(translateY(-50%) !important);
}
.docs-sub-content {
margin-right: 380px;
text-align: left;
}
.docs-title {
position: static;
float: left;
@include transform(translateX(0));
}
.docs-header-content {
top: 30%;
@include transform(translateY(-50%));
.btn {
display: inline-block;
}
}
.docs-subtitle {
margin-bottom: 30px;
font-size: 41px;
line-height: 60px;
}
// Docs nav
.docs-nav {
float: right;
.docs-nav-trigger {
display: none;
}
.docs-nav-group {
position: static;
display: block;
height: auto;
background-color: transparent;
opacity: 1;
}
.docs-nav-item {
position: relative;
display: inline-block;
padding: 0 15px;
font-size: 14px;
}
}
// Component jump menu
.docs-jump-menu {
position: absolute;
left: 20px;
display: block;
color: #777;
cursor: pointer;
@include transition(opacity .2 linear);
&:hover {
color: $primary-color;
}
&:active {
opacity: .5;
}
.icon-list {
font-size: 16px;
margin-right: 3px;
}
.icon-caret {
position: relative;
top: 4px;
}
}
.docs-component-group {
position: absolute;
top: 35px;
left: 30px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: 3px;
box-shadow: 0 0 8px rgba(0,0,0,.05);
&.active {
display: block; display: block;
} }
&:before, .slider .slide-group .slide-text {
&:after {
position: absolute; position: absolute;
left: 30px; top: 45%;
width: 0; left: 0;
height: 0; width: 100%;
content: '';
}
&:before {
top: -11px;
margin-left: -11px;
border-right: 11px solid transparent;
border-bottom: 11px solid rgba(0,0,0,.3);
border-left: 11px solid transparent;
}
&:after {
top: -10px;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent
}
.docs-component-item {
display: block;
padding: 10px 20px;
color: #777;
&:hover {
color: #fff; color: #fff;
background-color: $primary-color; text-align: center;
}
}
}
// Ads
.carbonad {
width: 330px !important;
border-right: 1px solid rgba(255,255,255,.1) !important;
border-bottom: 1px solid rgba(255,255,255,.1) !important;
border-left: 1px solid rgba(255,255,255,.1) !important;
border-radius: 3px !important;
}
// Social
.docs-footer {
.social .twitter-follow-button {
margin-top: 0;
}
}
// Steps
.step-title {
font-size: 24px; font-size: 24px;
font-weight: 300;
text-shadow: 0 0 10px rgba(0,0,0,.5);
} }
.step-title code { }
font-size: 18px;
}
.step-description {
font-size: 18px;
}
// Docs modules
.docs-module {
margin-top: 35px;
}
// Content sections // Example device
// -------------------------------------------------- // --------------------------------------------------
.section-heading {
margin-top: 50px;
margin-bottom: 10px;
font-size: 40px;
}
.section-lead {
font-size: 24px;
}
// Device .device {
font-family: $font-family-default;
font-size: $font-size-default;
line-height: $line-height-default;
display: none;
}
@media screen and (min-width: 768px) {
.device { .device {
position: relative; position: relative;
top: 50px; top: 50px;
@ -904,79 +966,36 @@ hr {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.component,
.component-example-fullbleed,
.highlight {
margin-left: 0;
margin-right: 0;
}
.component {
padding-left: 0;
padding-right: 0;
opacity: .3;
@include transition(opacity .2s ease-in-out);
&.active {
opacity: 1;
}
}
.component-example {
display: none;
}
.highlight pre {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-radius: 3px;
}
// Component overrides
.popover {
position: absolute;
display: block;
top: 72px;
opacity: 1;
}
.slider .slide img {
width: 100%;
height: 570px; // Fullscreen fun times
display: block;
}
.slider .slide-group .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,.5);
}
// Examples
.docs-example-group .example-wrap {
display: inline-block;
.example {
width: 180px;
}
}
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
// Device
.device { .device {
margin-left: 39px; margin-left: 39px;
} }
.docs-sub-header .carbonad { }
right: 30px !important;
}
// Component jump menu // Misc
.docs-jump-menu { // --------------------------------------------------
left: 30px;
} hr {
// Examples height: 0;
.docs-example-group .example-wrap .example { margin: 10px 0 30px;
width: 220px; border: solid #ddd;
} border-width: 1px 0 0;
clear: both;
}
.column-group {
*zoom: 1;
}
.column-group:before,
.column-group:after {
display: table;
line-height: 0;
content: "";
}
.column-group:after {
clear: both;
} }
@ -1083,7 +1102,10 @@ hr {
} }
} }
// Devices
// Example platform styles
// --------------------------------------------------
.platform-ios { .platform-ios {
@import "theme-ios.scss"; @import "theme-ios.scss";

Write Preview
Loading…
Cancel
Save