mirror of https://github.com/twbs/ratchet.git
Build mobile apps with simple HTML, CSS, and JS components.
http://goratchet.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1156 lines
20 KiB
1156 lines
20 KiB
@import "variables.scss"; |
|
@import "mixins.scss"; |
|
|
|
// Clearfix mixin for docs |
|
|
|
// |
|
// Documentation |
|
// -------------------------------------------------- |
|
|
|
html, |
|
body { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
body { |
|
position: relative !important; // Overrides the fixed positioning of body in Ratchet |
|
font: 400 14px/1.5 "Open Sans", sans-serif; |
|
color: #333; |
|
-webkit-text-size-adjust: 100%; |
|
background-color: #fff; |
|
-webkit-font-smoothing: antialiased; // Fix for webkit rendering |
|
} |
|
|
|
// Typography |
|
// |
|
// Gets scoped to a common class in the docs so we don't collide with any of |
|
// Ratchet's styles. |
|
|
|
.docs-content { |
|
font-size: 14px; |
|
|
|
@media screen and (min-width: 768px) { |
|
font-size: 18px; |
|
} |
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
font-weight: 400; |
|
color: #222; |
|
} |
|
h2 { |
|
margin-bottom: .25em; |
|
font-size: 2em; |
|
} |
|
h3 { |
|
margin-bottom: .5em; |
|
font-size: 1.25em; |
|
} |
|
|
|
p { |
|
margin-bottom: 1.5em; |
|
font-size: 1em; |
|
color: #555; |
|
} |
|
.lead { |
|
font-size: 1.1em; |
|
color: #777; |
|
} |
|
} |
|
|
|
|
|
// Jumbotron |
|
// -------------------------------------------------- |
|
.docs-header, |
|
.docs-sub-header { |
|
position: relative; |
|
@include directional-gradient(#0a1855, #da0024) |
|
} |
|
.docs-header { |
|
height: 100vh; |
|
min-height: 750px; |
|
|
|
// Ad on the homepage |
|
.carbonad { |
|
position: relative !important; |
|
margin-top: 0 !important; |
|
@include animation-name(fadeintext); |
|
@include animation-duration(2s); |
|
} |
|
.version { |
|
margin-top: 15px; |
|
color: rgba(255,255,255,.5); |
|
text-align: center; |
|
} |
|
} |
|
.docs-header-bottom { |
|
position: absolute; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
} |
|
// Desktop jumbotron |
|
@media screen and (min-width: 768px) { |
|
.docs-header { |
|
min-height: 870px; |
|
|
|
// Ads on the homepage |
|
.carbonad { |
|
left: 50% !important; |
|
width: 330px !important; |
|
margin-bottom: 60px !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); |
|
} |
|
} |
|
|
|
// Masthead and nav |
|
.docs-masthead { |
|
position: relative; |
|
padding-top: 15px; |
|
padding-bottom: 15px; |
|
border-bottom: 1px solid rgba(255,255,255,.1); |
|
} |
|
.docs-title { |
|
position: absolute; |
|
left: 50%; |
|
z-index: 20; |
|
margin-bottom: 0; |
|
font-size: 22px; |
|
font-weight: 400; |
|
@include transform(translateX(-50%)); |
|
} |
|
.docs-nav { |
|
.docs-nav-trigger { |
|
color: #fff; |
|
opacity: .7; |
|
|
|
&.active { |
|
opacity: 1; |
|
} |
|
} |
|
.docs-nav-group { |
|
position: absolute; |
|
top: 40px; |
|
right: 0; |
|
left: 0; |
|
z-index: 20; |
|
height: 0; |
|
overflow: hidden; |
|
background-color: rgba(0,0,0,.9); |
|
opacity: 0; |
|
|
|
&.active { |
|
height: auto; |
|
opacity: 1; |
|
} |
|
} |
|
.docs-nav-item { |
|
display: block; |
|
padding: 20px 15px; |
|
font-size: 22px; |
|
} |
|
} |
|
.docs-jump-menu, |
|
.docs-component-group { |
|
display: none; |
|
} |
|
.docs-title a, |
|
.docs-nav-item { |
|
color: #fff; |
|
@include transition(opacity .2s linear); |
|
|
|
&:active, |
|
&:focus { |
|
color: #fff; |
|
opacity: .5; |
|
} |
|
} |
|
|
|
// Desktop: Masthead and nav |
|
@media screen and (min-width: 768px) { |
|
.docs-title { |
|
position: static; |
|
float: left; |
|
font-weight: 300; |
|
@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: 15px; |
|
display: block; |
|
color: #777; |
|
cursor: pointer; |
|
@include transition(opacity .2 linear); |
|
|
|
&:hover { |
|
color: $primary-color; |
|
} |
|
&:active { |
|
opacity: .5; |
|
} |
|
.icon-list { |
|
margin-right: 3px; |
|
font-size: 16px; |
|
} |
|
.icon-caret { |
|
position: relative; |
|
top: 4px; |
|
margin-left: -5px; |
|
} |
|
} |
|
.docs-component-group { |
|
position: absolute; |
|
top: 35px; |
|
left: 15px; |
|
padding-top: 10px; |
|
padding-bottom: 10px; |
|
background-color: #fff; |
|
background-clip: padding-box; |
|
border: 1px solid rgba(0,0,0,.2); |
|
border-radius: 3px; |
|
@include 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; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Main homepage header content |
|
// "Build mobile apps using simple..." |
|
.docs-header-content { |
|
position: relative; |
|
padding: 50px 10px; |
|
text-align: center; |
|
@include animation-name(fadeintext); |
|
@include animation-duration(2s); |
|
|
|
.btn { |
|
display: block; |
|
padding: 15px 60px 16px; // Creates a button that's 330px wide. |
|
margin-bottom: 0; |
|
font-size: 18px; |
|
color: #0a1855; |
|
background-color: #fff; |
|
border: 0; |
|
@include transition(all .2s linear); |
|
|
|
&:hover { |
|
background-color: #fff; |
|
@include box-shadow(0 0 50px rgba(255,255,255,.3)); |
|
} |
|
&:active { |
|
opacity: .5; |
|
} |
|
} |
|
} |
|
.docs-subtitle { |
|
max-width: 750px; |
|
margin: 0 auto 20px; |
|
font-size: 28px; |
|
font-weight: 300; |
|
line-height: 38px; |
|
color: #fff; |
|
} |
|
|
|
// 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; |
|
height: auto !important; |
|
padding: 15px !important; |
|
font-size: 13px !important; |
|
line-height: 18px !important; |
|
background: transparent !important; |
|
border-top: 1px solid rgba(255,255,255,.1) !important; |
|
border-right: 0 !important; |
|
border-bottom: 0 !important; |
|
border-left: 0 !important; |
|
} |
|
.carbonad-img { |
|
margin: 0 !important; |
|
} |
|
.carbonad-text, |
|
.carbonad-tag { |
|
display: block !important; |
|
float: none !important; |
|
width: auto !important; |
|
height: auto !important; |
|
margin-left: 145px !important; |
|
color: rgba(255,255,255,.65) !important; |
|
font-family: "Open Sans", sans-serif !important; |
|
} |
|
.carbonad-text { |
|
padding-top: 0 !important; |
|
} |
|
.carbonad-tag { |
|
text-align: left !important; |
|
} |
|
.carbonad-text a, |
|
.carbonad-tag a { |
|
color: #fff !important; |
|
} |
|
.carbonad #azcarbon>img { |
|
display: none; |
|
} |
|
|
|
// Desktop styles for ads |
|
@media screen and (min-width: 768px) { |
|
.carbonad { |
|
width: 360px !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 |
|
// -------------------------------------------------- |
|
|
|
.docs-sub-content { |
|
position: relative; |
|
overflow: hidden; |
|
padding: 55px 15px 65px; |
|
color: #fff; |
|
text-align: center; |
|
|
|
.page-title, |
|
.page-description { |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
font-weight: 300; |
|
} |
|
.page-title { |
|
margin-bottom: 5px; |
|
font-size: 40px; |
|
} |
|
.page-description { |
|
font-size: 24px; |
|
color: #fff; |
|
opacity: .7; |
|
} |
|
} |
|
|
|
// Desktop: Left align the text |
|
@media screen and (min-width: 768px) { |
|
.docs-sub-content { |
|
margin-right: 380px; |
|
text-align: left; |
|
} |
|
} |
|
|
|
|
|
// Content sections |
|
// -------------------------------------------------- |
|
|
|
// Wrap each section of the docs |
|
.docs-section { |
|
padding-top: 50px; |
|
padding-bottom: 50px; |
|
border-bottom: 1px solid #ddd; |
|
} |
|
.docs-section:last-child { |
|
border-bottom: 0; |
|
} |
|
|
|
// Docs modules |
|
@media screen and (min-width: 768px) { |
|
.docs-module { |
|
margin-top: 35px; |
|
} |
|
} |
|
|
|
// Docs modules |
|
.docs-module { |
|
padding: 20px; |
|
margin-top: 20px; |
|
border: $border-default; |
|
border-radius: 3px; |
|
|
|
.btn-block { |
|
margin-bottom: 0; |
|
} |
|
} |
|
.version { |
|
margin-top: 10px; |
|
margin-bottom: 0; |
|
font-size: 90%; |
|
color: #777; |
|
} |
|
|
|
|
|
// Footer |
|
// -------------------------------------------------- |
|
|
|
.docs-footer { |
|
border-top: 1px solid #ddd; |
|
padding: 30px 20px; |
|
margin-top: 50px; |
|
font-size: 14px; |
|
text-align: center; |
|
color: #777; |
|
|
|
.social { |
|
padding: 0 0 20px; |
|
margin: 0; |
|
list-style: none; |
|
|
|
li { |
|
display: inline-block; |
|
height: 20px; |
|
vertical-align: top; |
|
} |
|
.twitter-follow-button { |
|
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; |
|
margin-bottom: 0; |
|
} |
|
@media screen and (min-width: 768px) { |
|
.docs-footer-text { |
|
width: 550px; |
|
padding-left: 0; |
|
padding-right: 0; |
|
margin: 0 auto; |
|
} |
|
} |
|
.docs-footer-links { |
|
padding-left: 0; |
|
|
|
li { |
|
display: inline; |
|
padding-left: 3px; |
|
padding-right: 3px; |
|
} |
|
} |
|
|
|
// Overrides for the homepage's footer |
|
.docs-header .docs-footer { |
|
margin-top: 0; |
|
border-top: 1px solid rgba(255,255,255,.1); |
|
|
|
.docs-footer-text, |
|
.docs-footer-links { |
|
color: rgba(255,255,255,.5); |
|
|
|
a { |
|
color: rgba(255,255,255,.8); |
|
} |
|
} |
|
} |
|
|
|
// Style the GitHub buttons via CSS instead of inline attributes |
|
.github-btn { |
|
border: 0; |
|
overflow: hidden; |
|
} |
|
|
|
|
|
// Platform toggle |
|
// -------------------------------------------------- |
|
|
|
.docs-component-toolbar { |
|
position: fixed; |
|
top: 0; |
|
bottom: auto; |
|
left: 0; |
|
right: 0; |
|
z-index: 20; |
|
height: 44px; |
|
padding-top: 8px; |
|
padding-bottom: 8px; |
|
background-color: #fff; |
|
border-bottom: 1px solid #ddd; |
|
-webkit-transition: -webkit-transform .5s; |
|
-moz-transition: -moz-transform .5s; |
|
transition: transform .5s; |
|
@include transform(translate3d(0, -55px, 0)); |
|
|
|
&.visible { |
|
@include transform(translate3d(0, 0, 0)); |
|
} |
|
|
|
.segmented-control { |
|
max-width: 300px; |
|
margin: 0 auto; |
|
|
|
.control-item { |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
|
|
|
|
// Example devices |
|
// -------------------------------------------------- |
|
.docs-examples { |
|
margin-top: 30px; |
|
} |
|
.example-wrap { |
|
margin-bottom: 30px; |
|
|
|
.example { |
|
display: block; |
|
width: 100%; |
|
padding: 3px; |
|
overflow: hidden; |
|
border: $border-default; |
|
border-radius: 3px; |
|
} |
|
.example-title { |
|
margin-top: 10px; |
|
} |
|
img { |
|
display: block; |
|
width: 100%; |
|
height: auto; |
|
} |
|
} |
|
|
|
|
|
// Components |
|
// -------------------------------------------------- |
|
|
|
code { |
|
padding: 2px 4px; |
|
font-size: 90%; |
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace; |
|
background-color: #f9f9f9; |
|
border-radius: 3px; |
|
} |
|
.component { |
|
padding: 50px 15px; |
|
margin-left: -15px; |
|
margin-right: -15px; |
|
border-bottom: 1px solid #ddd; |
|
|
|
// Added to the last component so the footer |
|
// doesn't create a double border. |
|
&.no-border { |
|
border-bottom: 0; |
|
} |
|
} |
|
@media screen and (min-width: 768px) { |
|
.component { |
|
border-bottom: 0; |
|
} |
|
} |
|
.component-title { |
|
margin-bottom: 10px; |
|
font-size: 24px; |
|
line-height: 34px; |
|
} |
|
.component-description { |
|
margin-bottom: 15px; |
|
font-size: 16px; |
|
} |
|
.component-example { |
|
font-size: $font-size-default; |
|
font-family: $font-family-default; |
|
line-height: $line-height-default; |
|
} |
|
.component-example, |
|
.component-example .bar, |
|
.component-example .content { |
|
position: relative; |
|
} |
|
.component-example .bar { |
|
border-top: $border-default; |
|
border-bottom: $border-default; |
|
|
|
&.bar-header-secondary { |
|
top: 0 !important; |
|
border-top: 0; |
|
} |
|
} |
|
.component-example > .content-padded { |
|
margin: 15px; |
|
} |
|
.component-example > .card { |
|
margin: 15px 0 0; |
|
|
|
.control-content { |
|
padding: 15px; |
|
} |
|
} |
|
.component-example > .btn, |
|
.component-example > .toggle { |
|
margin-bottom: 10px; |
|
} |
|
.component-example .slider { |
|
height: 300px; |
|
|
|
.slide { |
|
height: 300px; |
|
} |
|
} |
|
.component-example .slide img { |
|
width: 100%; |
|
} |
|
.component-example .slide-text { |
|
position: absolute; |
|
top: 45%; |
|
left: 0; |
|
width: 100%; |
|
text-align: center; |
|
font-size: 24px; |
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
|
color: #fff; |
|
} |
|
.component-example-fullbleed, |
|
.highlight { |
|
margin-left: -15px; |
|
margin-right: -15px; |
|
} |
|
.bar-nav ~ .content { |
|
padding: 0; |
|
} |
|
.highlight pre { |
|
padding: 15px; |
|
margin-top: 15px; |
|
overflow-x: auto; |
|
font-size: 13px; |
|
color: #777; |
|
background-color: #fafafa; |
|
border-top: 1px solid #ddd; |
|
border-bottom: 1px solid #ddd; |
|
white-space: pre; |
|
word-wrap: normal; |
|
} |
|
.highlight pre code { |
|
padding: 0; |
|
} |
|
@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 { |
|
height: 150px; |
|
overflow: hidden; |
|
} |
|
|
|
// Buttons |
|
#buttonsInDevice, |
|
#buttonsBadgesInDevice, |
|
#buttonsWithIconsInDevice { |
|
.btn { |
|
margin-top: 10px; |
|
margin-right: 100px; |
|
margin-left: 10px; |
|
} |
|
} |
|
#blockButtonsInDevice .btn-block { |
|
width: 300px; |
|
margin: 10px auto; |
|
} |
|
|
|
//Segmented Control |
|
#segmentedControlsInDevice { |
|
.segmented-control { |
|
margin-top: 10px; |
|
margin-right: 10px; |
|
margin-left: 10px; |
|
} |
|
.card span { |
|
padding: 10px; |
|
} |
|
} |
|
|
|
// Badges |
|
#badgesInDevice { |
|
text-align: center; |
|
|
|
.badge { |
|
margin-top: 10px; |
|
} |
|
} |
|
|
|
// Forms |
|
#formsInDevice form { |
|
margin: 10px; |
|
|
|
&.input-group { |
|
margin: 0; |
|
} |
|
} |
|
|
|
// Toggles |
|
#togglesInDevice .toggle { |
|
margin: 10px auto; |
|
} |
|
|
|
.toggle { |
|
cursor: pointer; |
|
} |
|
|
|
// Popovers |
|
#popoversInDevice { |
|
#iwindow:before { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
z-index: 11; |
|
background-color: rgba(0,0,0,.3); |
|
content: ''; |
|
} |
|
} |
|
@media screen and (min-width: 768px) { |
|
.popover { |
|
position: absolute; |
|
display: block; |
|
top: 72px; |
|
opacity: 1; |
|
} |
|
} |
|
|
|
// Modals |
|
#modalsInDevice { |
|
#iwindow > .btn { |
|
margin: 10px; |
|
} |
|
} |
|
|
|
// Sliders |
|
@media screen and (min-width: 768px) { |
|
.slider .slide { |
|
cursor: -webkit-grab; |
|
cursor: -moz-grab; |
|
cursor: grab; |
|
} |
|
.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; |
|
text-shadow: 0 0 10px rgba(0,0,0,.5); |
|
} |
|
} |
|
|
|
|
|
// Example device |
|
// -------------------------------------------------- |
|
|
|
.device { |
|
display: none; |
|
font-size: $font-size-default; |
|
font-family: $font-family-default; |
|
line-height: $line-height-default; |
|
} |
|
@media screen and (min-width: 768px) { |
|
.device { |
|
position: relative; |
|
top: 50px; |
|
display: block; |
|
width: 395px; |
|
height: 813px; |
|
margin-left: -20px; |
|
font-family: "Helvetica Neue", sans-serif; |
|
background-image: url("../img/device-sprite.png"); |
|
background-size: 300%; |
|
background-repeat: no-repeat; |
|
background-position: 0 0; |
|
@include transition(background-image .1s linear); |
|
|
|
&.device-fixed { |
|
position: fixed; |
|
right: auto; |
|
} |
|
} |
|
.device .device-content { |
|
position: absolute; |
|
top: 117px; |
|
left: 37px; |
|
width: 321px; |
|
height: 569px; |
|
overflow: hidden; |
|
font-size: $font-size-default; |
|
line-height: $line-height-default; |
|
background-color: #fff; |
|
} |
|
.device .content, |
|
.device .bar, |
|
.device .modal { |
|
position: absolute; |
|
} |
|
.device .content { |
|
top: 44px; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
} |
|
} |
|
@media screen and (min-width: 1200px) { |
|
.device { |
|
margin-left: 39px; |
|
} |
|
} |
|
|
|
|
|
// Misc |
|
// -------------------------------------------------- |
|
|
|
hr { |
|
height: 0; |
|
margin: 10px 0 30px; |
|
border: solid #ddd; |
|
border-width: 1px 0 0; |
|
clear: both; |
|
} |
|
|
|
.column-group { |
|
@include clearfix; |
|
} |
|
|
|
|
|
// The Chassis grid |
|
// -------------------------------------------------- |
|
|
|
.container { |
|
position: relative; |
|
margin-left: auto; |
|
margin-right: auto; |
|
padding-left: 0; |
|
padding-right: 0; |
|
} |
|
.column-group { |
|
width: auto; |
|
} |
|
.column { |
|
padding-left: 15px; |
|
padding-right: 15px; |
|
float: left; |
|
width: 100%; |
|
|
|
&.pull-right { |
|
float: right; |
|
} |
|
} |
|
// Lines nested grids up correctly. |
|
.column .column-group { |
|
margin-left: -15px; |
|
margin-right: -15px; |
|
} |
|
|
|
|
|
// Tablet to desktop |
|
// -------------------------------------------------- |
|
|
|
@media screen and (min-width: 768px) { |
|
.container { |
|
padding: 0; |
|
max-width: 940px; |
|
} |
|
|
|
// Twelve column fluid grid |
|
.lg-units-4 { width: 33.333%; } |
|
.lg-units-5 { width: 41.666%; } |
|
.lg-units-7 { width: 58.333%; } |
|
.lg-units-8 { width: 66.666%; } |
|
} |
|
|
|
|
|
// Standard sized screens to large screens |
|
// -------------------------------------------------- |
|
|
|
@media screen and (min-width: 1200px) { |
|
.container { |
|
max-width: 1170px; |
|
} |
|
} |
|
|
|
|
|
// Example platform styles |
|
// -------------------------------------------------- |
|
|
|
.platform-ios { |
|
@import "theme-ios.scss"; |
|
|
|
.device { |
|
background-position: -395px 0; |
|
|
|
.device-content { |
|
background-color: #efeff4; |
|
} |
|
} |
|
} |
|
.platform-android { |
|
@import "theme-android.scss"; |
|
|
|
.device { |
|
font-family: 'Roboto', sans-serif; |
|
background-position: -790px 0; |
|
|
|
.device-content { |
|
font-size: 18px; |
|
line-height: 22px; |
|
background-color: #f2f2f2; |
|
} |
|
.content { |
|
top: 50px; |
|
} |
|
.popover { |
|
@include transform(scale(1)); |
|
} |
|
} |
|
.bar ~ .content { |
|
padding: 0; |
|
} |
|
} |
|
|
|
// Animations |
|
@-webkit-keyframes fadeintext { |
|
0% { |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
// Taken from Bootstrap docs |
|
// |
|
// Callouts |
|
// |
|
// Not quite alerts, but custom and helpful notes for folks reading the docs. |
|
// Requires a base and modifier class. |
|
|
|
// Common styles for all types |
|
.bs-callout { |
|
padding: 20px; |
|
margin: 20px 0; |
|
border-left: 3px solid #eee; |
|
} |
|
.bs-callout h4 { |
|
margin-top: 0; |
|
margin-bottom: 5px; |
|
} |
|
.bs-callout p:last-child { |
|
margin-bottom: 0; |
|
} |
|
.bs-callout code { |
|
background-color: #fff; |
|
border-radius: 3px; |
|
} |
|
|
|
// Variations |
|
.bs-callout-danger { |
|
background-color: #fdf7f7; |
|
border-color: #d9534f; |
|
} |
|
.bs-callout-danger h4 { |
|
color: #d9534f; |
|
} |
|
.bs-callout-warning { |
|
background-color: #fcf8f2; |
|
border-color: #f0ad4e; |
|
} |
|
.bs-callout-warning h4 { |
|
color: #f0ad4e; |
|
} |
|
.bs-callout-info { |
|
background-color: #f4f8fa; |
|
border-color: #5bc0de; |
|
} |
|
.bs-callout-info h4 { |
|
color: #5bc0de; |
|
} |
|
|
|
// Team module |
|
.list-group { |
|
margin-bottom: 20px; |
|
padding-left: 0; |
|
} |
|
.list-group-item:first-child { |
|
border-top-right-radius: 4px; |
|
border-top-left-radius: 4px; |
|
} |
|
.list-group-item { |
|
position: relative; |
|
display: block; |
|
padding: 10px 15px; |
|
margin-bottom: -1px; |
|
background-color: #fff; |
|
border: 1px solid #ddd; |
|
} |
|
.list-group .team-member { |
|
color: #555; |
|
font-size: 14px; |
|
line-height: 32px; |
|
} |
|
.list-group img { |
|
float: left; |
|
width: 32px; |
|
margin-right: 10px; |
|
border-radius: 4px; |
|
} |
|
.list-group .team-member-info { |
|
overflow: hidden; |
|
} |
|
.list-group .github-btn { |
|
float: right; |
|
margin-top: 6px; |
|
width: 121px; |
|
height: 20px; |
|
} |
|
|
|
// Browser support table |
|
.browser-support-table td, |
|
.browser-support-table th { |
|
border: 1px solid #ddd; |
|
padding: 5px; |
|
} |
|
.browser-support-maybe { |
|
color: #fff; |
|
background-color: #f0ad4e; |
|
} |
|
.browser-support-yes { |
|
background-color: $positive-color; |
|
} |
|
.browser-support-no { |
|
background-color: $negative-color; |
|
}
|
|
|