diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ca75747..be6e2fa 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -28,26 +28,13 @@ body {
position: relative;
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 {
height: 100vh;
- min-height: 700px;
+ min-height: 750px;
}
.docs-header .carbonad {
- position: absolute !important;
- bottom: 180px !important;
+ position: relative !important;
margin-top: 0 !important;
-webkit-animation-name: fadeintext;
-moz-animation-name: fadeintext;
@@ -62,6 +49,38 @@ body {
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 {
position: relative;
padding-top: 15px;
@@ -129,9 +148,113 @@ body {
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 {
position: relative;
- top: 30px;
text-align: center;
padding: 50px 10px;
-webkit-animation-name: fadeintext;
@@ -171,6 +294,23 @@ body {
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 {
width: 100% !important;
height: auto !important;
@@ -216,6 +356,15 @@ body {
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 {
position: relative;
overflow: hidden;
@@ -240,6 +389,12 @@ body {
opacity: .7;
}
+@media screen and (min-width: 768px) {
+ .docs-sub-content {
+ margin-right: 380px;
+ text-align: left;
+ }
+}
.docs-section {
padding-top: 80px;
padding-bottom: 80px;
@@ -262,6 +417,17 @@ body {
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 {
margin-top: 20px;
padding: 0;
@@ -290,6 +456,23 @@ body {
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 {
margin-top: 20px;
padding: 20px;
@@ -314,8 +497,7 @@ body {
.docs-footer {
border-top: 1px solid #ddd;
margin-top: 50px;
- padding-top: 30px;
- padding-bottom: 30px;
+ padding: 30px 20px;
color: #777;
font-size: 14px;
text-align: center;
@@ -333,6 +515,11 @@ body {
.docs-footer .social .twitter-follow-button {
margin-top: 5px;
}
+@media screen and (min-width: 768px) {
+ .docs-footer .social .twitter-follow-button {
+ margin-top: 0;
+ }
+}
.docs-footer-text {
margin-top: 0;
@@ -343,6 +530,8 @@ body {
.docs-footer-text {
width: 550px;
margin: 0 auto;
+ padding-left: 0;
+ padding-right: 0;
}
}
.docs-footer-links {
@@ -355,10 +544,6 @@ body {
}
.docs-header .docs-footer {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
margin-top: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@@ -444,6 +629,19 @@ body {
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 {
padding: 2px 4px;
font-size: 90%;
@@ -555,31 +753,62 @@ code {
word-wrap: normal;
}
-#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;
-}
+@media screen and (min-width: 768px) {
+ .component,
+ .component-example-fullbleed,
+ .highlight {
+ margin-left: 0;
+ margin-right: 0;
+ }
-#push .component-example {
- height: 150px;
- overflow: hidden;
-}
+ .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;
+ }
+}
+#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,
-#buttonsBadgesInDevice .btn {
+#buttonsBadgesInDevice .btn,
+#buttonsWithIconsInDevice .btn {
margin-top: 10px;
margin-right: 100px;
margin-left: 10px;
@@ -627,227 +856,45 @@ code {
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) {
- .docs-header {
- min-height: 870px;
- }
- .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;
+ .popover {
+ position: absolute;
display: block;
- height: auto;
- background-color: transparent;
+ top: 72px;
opacity: 1;
}
- .docs-nav .docs-nav-item {
- position: relative;
- display: inline-block;
- padding: 0 15px;
- font-size: 14px;
- }
+}
+#modalsInDevice #iwindow > .btn {
+ margin: 10px;
+}
- .docs-jump-menu {
- position: absolute;
- left: 20px;
+@media screen and (min-width: 768px) {
+ .slider .slide img {
+ width: 100%;
+ height: 570px;
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 {
+ .slider .slide-group .slide-text {
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 {
+ top: 45%;
+ left: 0;
+ width: 100%;
color: #fff;
- background-color: #428bca;
- }
-
- .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 {
+ text-align: center;
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 {
position: relative;
top: 50px;
@@ -892,85 +939,35 @@ hr {
right: 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) {
.device {
margin-left: 39px;
}
+}
+hr {
+ height: 0;
+ margin: 10px 0 30px;
+ border: solid #ddd;
+ border-width: 1px 0 0;
+ clear: both;
+}
- .docs-sub-header .carbonad {
- right: 30px !important;
- }
+.column-group {
+ *zoom: 1;
+}
- .docs-jump-menu {
- left: 30px;
- }
+.column-group:before,
+.column-group:after {
+ display: table;
+ line-height: 0;
+ content: "";
+}
- .docs-example-group .example-wrap .example {
- width: 220px;
- }
+.column-group:after {
+ clear: both;
}
+
.container {
position: relative;
margin-left: auto;
diff --git a/docs/index.html b/docs/index.html
index cd90959..32d8996 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -11,6 +11,8 @@ title: Ratchet
Currently v2.0.0
- {% include ad.html %}
- {% include footer.html %}
+
diff --git a/sass/docs.scss b/sass/docs.scss
index 6caa51c..cc30260 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -28,28 +28,14 @@ body {
.docs-sub-header {
position: relative;
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 {
height: 100vh;
- min-height: 700px;
+ min-height: 750px;
// Ad on the homepage
.carbonad {
- position: absolute !important;
- bottom: 180px !important;
+ position: relative !important;
margin-top: 0 !important;
@include animation-name(fadeintext);
@include animation-duration(2s);
@@ -60,8 +46,42 @@ body {
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 {
position: relative;
padding-top: 15px;
@@ -124,9 +144,121 @@ body {
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 {
position: relative;
- top: 30px;
text-align: center;
padding: 50px 10px;
@include animation-name(fadeintext);
@@ -160,6 +292,23 @@ body {
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
.carbonad {
width: 100% !important;
@@ -200,6 +349,18 @@ body {
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
// --------------------------------------------------
@@ -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
// --------------------------------------------------
+
.docs-section {
padding-top: 80px;
padding-bottom: 80px;
@@ -250,6 +420,19 @@ body {
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
// --------------------------------------------------
@@ -276,6 +459,24 @@ body {
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-module {
margin-top: 20px;
@@ -304,8 +505,7 @@ body {
.docs-footer {
border-top: 1px solid #ddd;
margin-top: 50px;
- padding-top: 30px;
- padding-bottom: 30px;
+ padding: 30px 20px;
color: #777;
font-size: 14px;
text-align: center;
@@ -324,6 +524,12 @@ body {
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 {
margin-top: 0;
@@ -333,6 +539,8 @@ body {
.docs-footer-text {
width: 550px;
margin: 0 auto;
+ padding-left: 0;
+ padding-right: 0;
}
}
.docs-footer-links {
@@ -347,10 +555,6 @@ body {
// Overrides for the homepage's footer
.docs-header .docs-footer {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
margin-top: 0;
border-top: 1px solid rgba(255,255,255,.1);
@@ -370,6 +574,7 @@ body {
overflow: hidden;
}
+
// Platform toggle
// --------------------------------------------------
@@ -405,6 +610,7 @@ body {
}
}
+
// Example devices
// --------------------------------------------------
@@ -441,9 +647,22 @@ body {
}
}
}
-// .example-device {
-// margin: 0 auto;
-// }
+@media screen and (min-width: 768px) {
+ // 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
// --------------------------------------------------
@@ -546,22 +765,51 @@ code {
white-space: pre;
word-wrap: normal;
}
-#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;
- z-index: 50;
+@media screen and (min-width: 768px) {
+ .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;
+ }
+}
+
+
+// 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;
+ z-index: 50;
}
// Push
#push .component-example {
@@ -571,7 +819,8 @@ code {
// Buttons
#buttonsInDevice,
-#buttonsBadgesInDevice {
+#buttonsBadgesInDevice,
+#buttonsWithIconsInDevice {
.btn {
margin-top: 10px;
margin-right: 100px;
@@ -630,6 +879,14 @@ code {
content: '';
}
}
+@media screen and (min-width: 768px) {
+ .popover {
+ position: absolute;
+ display: block;
+ top: 72px;
+ opacity: 1;
+ }
+}
// Modals
#modalsInDevice {
@@ -638,232 +895,37 @@ code {
}
}
-// Misc
-// --------------------------------------------------
-
-.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
-.clear {
- display: block;
- width: 0;
- height: 0;
- overflow: hidden;
- visibility: hidden;
- clear: both;
-}
-
-
-// Docs media queries
-// --------------------------------------------------
-
-// Tablet to desktop
+// Sliders
@media screen and (min-width: 768px) {
- .docs-header {
- min-height: 870px;
-
- // 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;
+ .slider .slide img {
+ width: 100%;
+ height: 570px; // Fullscreen fun times
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 {
+ .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,.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;
- }
- }
- }
-
- // 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 {
+ 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);
}
- .step-title code {
- font-size: 18px;
- }
- .step-description {
- font-size: 18px;
- }
-
- // Docs modules
- .docs-module {
- margin-top: 35px;
- }
+}
- // Content sections
- // --------------------------------------------------
- .section-heading {
- margin-top: 50px;
- margin-bottom: 10px;
- font-size: 40px;
- }
- .section-lead {
- font-size: 24px;
- }
+// Example device
+// --------------------------------------------------
- // 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 {
position: relative;
top: 50px;
@@ -904,79 +966,36 @@ hr {
right: 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) {
- // Device
.device {
margin-left: 39px;
}
- .docs-sub-header .carbonad {
- right: 30px !important;
- }
- // Component jump menu
- .docs-jump-menu {
- left: 30px;
- }
- // Examples
- .docs-example-group .example-wrap .example {
- width: 220px;
- }
+}
+
+
+// Misc
+// --------------------------------------------------
+
+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;
}
@@ -1083,7 +1102,10 @@ hr {
}
}
-// Devices
+
+// Example platform styles
+// --------------------------------------------------
+
.platform-ios {
@import "theme-ios.scss";