Browse Source

Merge pull request #349 from twbs/docs-refactor

Docs css reorg
pull/350/head
Connor Sears 11 years ago
parent
commit
64eca23545
  1. 639
      docs/assets/css/docs.css
  2. 2
      docs/index.html
  3. 676
      sass/docs.scss

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

2
docs/index.html

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

676
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,20 +765,49 @@ 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 {
@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;
}
@ -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 <br class="clear">
.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;
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 {
.slider .slide img {
width: 100%;
height: 570px; // Fullscreen fun times
display: block;
}
&:before,
&:after {
.slider .slide-group .slide-text {
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 {
top: 45%;
left: 0;
width: 100%;
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 {
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";

Loading…
Cancel
Save