@import "variables.scss"; @import "mixins.scss"; // Devices .platform-ios { @import "theme-ios.scss"; } .platform-android { @import "theme-android.scss"; } // // Documentation // -------------------------------------------------- html, body { width: 100%; height: 100%; } body { position: relative !important; // Overrides the fixed positioning of body in Ratchet font: 14px/1.5 "adelle-sans",sans-serif; color: #333; background-color: #fff; -webkit-font-smoothing: antialiased; // Fix for webkit rendering -webkit-text-size-adjust: 100%; } // Jumbotron // -------------------------------------------------- .docs-header { background-image: linear-gradient(45deg, #336f90 0%, #254456 100%); } .docs-nav { position: relative; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); .icon, .version { position: absolute; color: #fff; opacity: .4; @include transition(opacity .2s linear); &:hover { opacity: 1; } } .icon { top: 15px; right: 0; cursor: pointer; } .version { top: 21px; left: 0; } } .docs-nav, .docs-header-content { text-align: center; } .docs-header-content { padding-top: 50px; padding-bottom: 50px; .button { padding: 15px 30px 16px; font-size: 18px; color: #00d1fe; border-color: #00d1fe; @include transition(all .2s linear); &:hover { color: #63e3ff; border-color: #63e3ff; } &:active { opacity: .5; background-color: transparent; } } .button-primary { margin-left: 10px; color: #fff; border-color: #00d1fe; background-color: #00d1fe; &:hover { color: #fff; border-color: #63e3ff; background-color: #63e3ff; } &:active { background-color: #63e3ff; } } } .docs-title, .docs-subtitle { color: #fff; } .docs-title { margin: 0; font-size: 22px; font-weight: 500; text-transform: uppercase; letter-spacing: 6px; } .docs-subtitle { max-width: 750px; margin: 0 auto 20px; font-size: 24px; font-weight: 100; line-height: 34px; } // Content sections // -------------------------------------------------- .docs-section { padding-top: 80px; padding-bottom: 80px; } .section-header { text-align: center; &:after { display: block; content: ''; width: 200px; margin: 50px auto 80px; border-bottom: 1px solid #eee; } } .section-heading, .section-lead { margin-top: 0; margin-bottom: 0; } .section-heading { font-size: 55px; font-weight: 300; } .section-lead { font-size: 24px; color: #777; font-weight: 100; } // Overriding the button styles for the social // -------------------------------------------------- .social { padding: 20px 0 20px; margin: 0; list-style: none; text-align: center; border-bottom: 1px solid #eee; background-color: #f9f9f9; li { height: 20px; display: inline-block; vertical-align: top; } [class*="button"] { padding: 0; border: 0; } // Remove after button class changes. iframe { background-color: transparent; } } // Benefits // -------------------------------------------------- .docs-benefits { padding-bottom: 0; text-align: center; } .benefit-icon { display: block; width: 100px; height: 100px; margin: 0 auto 20px; border: 1px solid #ddd; border-radius: 50px; .icon { color: #14b9d6; font-size: 50px; line-height: 100px; } } .benefit-heading { font-weight: 500; font-size: 24px; margin-top: 5px; margin-bottom: 5px; } .benefit-text { margin-top: 0; margin-bottom: 100px; font-size: 18px; color: #777; } // Contribute // -------------------------------------------------- .docs-contribute { padding-top: 50px; padding-bottom: 50px; color: #fff; text-align: center; background-color: #00d1fe; .link { display: inline-block; margin-top: 5px; color: #fff; text-decoration: underline; } } .contribute-heading, .contribute-text { margin-top: 0; } .contribute-heading { margin-bottom: 5px; font-size: 18px; font-weight: 500; } .contribute-text { margin-bottom: 0; color: rgba(255,255,255,.85); } // Footer // -------------------------------------------------- .docs-footer { padding-top: 20px; padding-bottom: 20px; color: rgba(255,255,255,.7); text-align: center; background-color: #254456; .footer-content { opacity: .7; a { color: #fff; } } } // Masthead // -------------------------------------------------- .docs-masthead { padding-top: 60px; text-align: center; background-color: #1eb0e9; .logotype { display: inline-block; width: 40px; height: 40px; padding: 10px; margin-top: 0; margin-bottom: 10px; color: #fff; font-size: 18px; font-weight: normal; line-height: 16px; border: 2px solid #fff; border-radius: 50px; opacity: .7; @include transition(all .2s linear); } .section-title, .section-description { margin-top: 0; margin-bottom: 0; font-weight: 300; } .section-title { color: #fff; font-size: 45px; } .section-description { color: #fff; font-size: 24px; opacity: .7; } .icon { position: fixed; color: #fff; opacity: .7; @include transition(all .2s linear); &:hover { opacity: 1; } } .icon-download { top: 11px; right: 60px; } .icon-list { top: 15px; right: 15px; } } .docs-navigation { float: right; padding-top: 5px; .nav-item { margin-left: 20px; } } // Platform toggle // -------------------------------------------------- .platform-toggle { padding-top: 20px; padding-bottom: 70px; background-color: #1eb0e9; @include transition(padding-top .2s linear, padding-bottom .2s linear); &.fixed { position: fixed; top: 0; bottom: auto; left: 0; right: 0; z-index: 3; padding-top: 8px; padding-bottom: 8px; } .segmented-controller { max-width: 300px; margin: 0 auto; border-color: #fff; background-color: #1eb0e9; li { cursor: pointer; border-color: #fff; a { color: #fff; } &:active { background-color: rgba(255,255,255,.3); } &.selected { background-color: #fff; a { color: #1eb0e9; } } } } } // Components // -------------------------------------------------- .component { padding: 50px 15px; margin-left: -15px; margin-right: -15px; border-bottom: 1px solid #ddd; } .component-title { margin: 0; font-size: 24px; font-weight: 300; } .component-description { margin-top: 10px; margin-bottom: 10px; font-size: 16px; } .component-example { font-family: $font-family-default; font-size: $font-size-default; line-height: $line-height-default; } .component-example, .component-example [class*="bar"], .component-example .content { position: relative; } .component-example-fullbleed, .highlight { margin-left: -15px; margin-right: -15px; } .component-example .table-view.inset { margin-left: 0; margin-right: 0; } .component-example .bar-header-secondary { top: 0; } .bar-nav ~ .content { padding: 0; } .highlight pre { margin-top: 15px; padding: 15px; font-size: 13px; overflow-x: auto; color: #777; background-color: #fafafa; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; white-space: pre; word-wrap: normal; } // Misc // -------------------------------------------------- .notice-banner { height: 0; margin: 0; padding: 0; color: #333; font-size: 16px; text-align: center; background-color: #fff9c4; opacity: 0; -moz-animation: shownotice 1s infinite; } .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 // -------------------------------------------------- @media screen and (min-width: 768px) { // Jumbotron .docs-header-content { padding-top: 100px; padding-bottom: 130px; } .docs-subtitle { margin-bottom: 30px; font-size: 41px; line-height: 60px; } // Device .device { position: relative; top: 50px; display: block; width: 395px; height: 813px; margin-left: -13px; font-family: "Helvetica Neue", sans-serif; background-image: url("../img/iphone.png"); background-size: 100%; background-repeat: no-repeat; @include animation-name(fadein); @include animation-duration(2s); &.device-fixed { position: fixed; right: auto; } } .device .device-content { position: absolute; top: 117px; left: 37px; width: 320px; height: 569px; overflow: hidden; font-size: $font-size-default; line-height: $line-height-default; background-color: #efeff4; } .device .content, .device [class*="bar"], .device .modal { position: absolute; } .device .content { top: 44px; left: 0; right: 0; bottom: 0; } .component, .component-example-fullbleed, .highlight { margin-left: 0; margin-right: 0; } .component { padding-left: 0; padding-right: 0; opacity: .5; @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 li img { width: 100%; } .slider .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); } } // The Chassis grid // -------------------------------------------------- .container { margin-left: auto; margin-right: auto; } .column-group { width: auto; } .column { padding-left: 15px; padding-right: 15px; float: left; &.pull-right { float: right; } } // Lines nested grids up correctly. .column .column-group { margin-left: -15px; margin-right: -15px; } .units-1 { width: 50%; } .units-2 { width: 100%; } // Offsets .offset-1 { margin-left: 50%; } // Tablet to desktop // -------------------------------------------------- @media screen and (min-width: 768px) { .container { padding: 0; max-width: 940px; } .column { padding-left: 20px; padding-right: 20px; } // Lines nested grids up correctly. .column .column-group { margin-left: -20px; margin-right: -20px; } // Override the mobile grid .units-1 { width: 50%; } .units-2 { width: 100%; } // Twelve column fluid grid .lg-units-1 { width: 8.333%; } .lg-units-2 { width: 16.666%; } .lg-units-3 { width: 25%; } .lg-units-4 { width: 33.333%; } .lg-units-5 { width: 41.666%; } .lg-units-6 { width: 50%; } .lg-units-7 { width: 58.333%; } .lg-units-8 { width: 66.666%; } .lg-units-9 { width: 75%; } .lg-units-10 { width: 83.333%; } .lg-units-11 { width: 91.666%; } .lg-units-12 { width: 100%; } // Offsets .lg-offset-1 { margin-left: 8.333%; } .lg-offset-2 { margin-left: 16.666%; } .lg-offset-3 { margin-left: 25%; } .lg-offset-4 { margin-left: 33.333%; } .lg-offset-5 { margin-left: 41.666%; } .lg-offset-6 { margin-left: 50%; } .lg-offset-7 { margin-left: 58.333%; } .lg-offset-8 { margin-left: 66.666%; } .lg-offset-9 { margin-left: 75%; } .lg-offset-10 { margin-left: 83.333%; } .lg-offset-11 { margin-left: 91.666%; } } // Standard sized screens to large screens // -------------------------------------------------- @media screen and (min-width: 1200px) { .container { max-width: 1170px; } .column { padding-left: 30px; padding-right: 30px; } // Lines nested grids up correctly. .column .column-group { margin-left: -30px; margin-right: -30px; } }