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

reorg the media queries

pull/349/head
connors 11 years ago
parent
312dd79824
commit
bfaa083596
2 changed files with 595 additions and 593 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. 574
      docs/assets/css/docs.css
  2. 614
      sass/docs.scss

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

@ -28,18 +28,6 @@ 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;
@ -62,6 +50,31 @@ body {
text-align: center; text-align: center;
} }
@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;
}
}
@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,6 +142,111 @@ 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; top: 30px;
@ -171,6 +289,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 +351,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 +384,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 +412,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 +451,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;
@ -333,6 +511,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;
@ -444,6 +627,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,6 +751,36 @@ code {
word-wrap: normal; word-wrap: normal;
} }
@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;
-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, #ratchicons .icon,
#ratchiconsInDevice .icon { #ratchiconsInDevice .icon {
width: 50px; width: 50px;
@ -627,227 +853,45 @@ code {
content: ''; content: '';
} }
@media screen and (min-width: 768px) {
.popover {
position: absolute;
display: block;
top: 72px;
opacity: 1;
}
}
#modalsInDevice #iwindow > .btn { #modalsInDevice #iwindow > .btn {
margin: 10px; 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 { .slider .slide img {
min-height: 870px; width: 100%;
} height: 570px;
.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;
background-color: transparent;
opacity: 1;
}
.docs-nav .docs-nav-item {
position: relative;
display: inline-block;
padding: 0 15px;
font-size: 14px;
} }
.docs-jump-menu { .slider .slide-group .slide-text {
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; 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 +936,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;

614
sass/docs.scss
Unescape View File

@ -28,19 +28,6 @@ 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;
@ -60,8 +47,36 @@ body {
text-align: center; text-align: center;
} }
} }
// Desktop jumbotron
@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;
}
}
// 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,6 +139,119 @@ 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; top: 30px;
@ -159,6 +287,21 @@ body {
color: #fff; color: #fff;
line-height: 38px; line-height: 38px;
} }
@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 {
@ -200,6 +343,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
// -------------------------------------------------- // --------------------------------------------------
@ -227,6 +382,12 @@ body {
opacity: .7; opacity: .7;
} }
} }
@media screen and (min-width: 768px) {
.docs-sub-content {
margin-right: 380px;
text-align: left;
}
}
// Content sections // Content sections
@ -249,6 +410,16 @@ body {
color: #777; color: #777;
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;
}
}
// Steps // Steps
// -------------------------------------------------- // --------------------------------------------------
@ -276,6 +447,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;
@ -324,6 +513,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;
@ -441,9 +636,21 @@ 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,6 +753,35 @@ code {
white-space: pre; white-space: pre;
word-wrap: normal; word-wrap: normal;
} }
@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, #ratchicons .icon,
#ratchiconsInDevice .icon { #ratchiconsInDevice .icon {
width: 50px; width: 50px;
@ -630,6 +866,14 @@ code {
content: ''; content: '';
} }
} }
@media screen and (min-width: 768px) {
.popover {
position: absolute;
display: block;
top: 72px;
opacity: 1;
}
}
// Modals // Modals
#modalsInDevice { #modalsInDevice {
@ -638,7 +882,27 @@ code {
} }
} }
// Misc // Sliders
@media screen and (min-width: 768px) {
.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);
}
}
// Example device
// -------------------------------------------------- // --------------------------------------------------
.device { .device {
@ -647,223 +911,7 @@ code {
line-height: $line-height-default; line-height: $line-height-default;
display: none; 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 {
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 {
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 {
font-size: 24px;
}
.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;
}
// Device
.device { .device {
position: relative; position: relative;
top: 50px; top: 50px;
@ -904,79 +952,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 +1088,10 @@ hr {
} }
} }
// Devices
// Example platform styles
// --------------------------------------------------
.platform-ios { .platform-ios {
@import "theme-ios.scss"; @import "theme-ios.scss";

Write Preview
Loading…
Cancel
Save