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.
1136 lines
20 KiB
1136 lines
20 KiB
/* Base styles |
|
-------------------------------------------------- */ |
|
|
|
body { |
|
position: static !important; /* Overrides the fixed positioning of body in Ratchet */ |
|
font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif; |
|
font-size: 14px; |
|
line-height: 1.6; |
|
color: #333; |
|
background: #fff; |
|
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ |
|
-webkit-text-size-adjust: 100%; |
|
} |
|
|
|
|
|
/* Typography |
|
-------------------------------------------------- */ |
|
|
|
em { |
|
font-style: italic; |
|
} |
|
|
|
strong { |
|
font-weight: bold; |
|
} |
|
|
|
hr { |
|
height: 0; |
|
margin: 10px 0 30px; |
|
border: solid #ddd; |
|
border-width: 1px 0 0; |
|
clear: both; |
|
} |
|
|
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6 { |
|
text-rendering: optimizeLegibility; |
|
} |
|
|
|
|
|
/* Docs structural styles |
|
-------------------------------------------------- */ |
|
.docs-outer-wrapper { |
|
position: relative; |
|
} |
|
|
|
.docs-inner-wrapper { |
|
width: 1000px; |
|
margin: 0 auto; |
|
} |
|
|
|
/* Masthead (navigation) |
|
-------------------------------------------------- */ |
|
|
|
.docs-masthead { |
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
left: 0; |
|
z-index: 100; |
|
padding: 10px 0; |
|
background-color: #fff; |
|
border-bottom: 1px solid #ddd; |
|
box-shadow: 0 0 5px rgba(0,0,0,.1); |
|
} |
|
|
|
.docs-masthead .docs-inner-wrapper { |
|
line-height: 40px; |
|
} |
|
|
|
.docs-masthead-title { |
|
font-weight: 700; |
|
font-size: 21px; |
|
text-transform: uppercase; |
|
letter-spacing: 5px; |
|
} |
|
|
|
.docs-navigation { |
|
float: right; |
|
font-size: 15px; |
|
} |
|
|
|
.nav-item { |
|
position: relative; |
|
float: left; |
|
margin-right: 30px; |
|
list-style: none; |
|
} |
|
|
|
.nav-item:last-child { |
|
margin-right: 0; |
|
} |
|
|
|
.nav-item a { |
|
position: relative; |
|
color: #777; |
|
text-decoration: none; |
|
} |
|
|
|
.nav-item a:hover { |
|
color: #555; |
|
} |
|
|
|
/* Give the components link a bit more room to fit the caret */ |
|
.nav-item.nav-components { |
|
margin-right: 45px; |
|
} |
|
|
|
/* Give the components link a down caret */ |
|
.nav-components-link:after { |
|
content: ''; |
|
position: absolute; |
|
right: 0; |
|
width: 0; |
|
height: 0; |
|
top: 8px; |
|
right: -15px; |
|
margin-left: -4px; |
|
border-right: 4px solid transparent; |
|
border-top: 4px solid #777; |
|
border-left: 4px solid transparent; |
|
} |
|
|
|
/* The components list dropdown */ |
|
.components-list { |
|
position: absolute; |
|
display: none; |
|
top: 45px; |
|
left: -20px; |
|
z-index: -1; |
|
padding: 10px 0; |
|
line-height: 1.1; |
|
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); |
|
} |
|
|
|
.components-list.active { |
|
z-index: 100; |
|
display: block; |
|
} |
|
|
|
.components-list:before, |
|
.components-list:after { |
|
content: ''; |
|
position: absolute; |
|
left: 30px; |
|
width: 0; |
|
height: 0; |
|
} |
|
|
|
.components-list: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; |
|
} |
|
|
|
.components-list:after { |
|
top: -10px; |
|
margin-left: -10px; |
|
border-right: 10px solid transparent; |
|
border-bottom: 10px solid #fff; |
|
border-left: 10px solid transparent; |
|
} |
|
|
|
.components-list li { |
|
list-style: none; |
|
} |
|
|
|
.components-list li:last-child { |
|
padding-bottom: 0; |
|
} |
|
|
|
.components-list li a { |
|
display: block; |
|
width: 150px; |
|
padding: 10px 20px; |
|
} |
|
|
|
.components-list li a:hover { |
|
color: #fff; |
|
background-color: #1eb0e9; |
|
} |
|
|
|
/* Jumbo header |
|
-------------------------------------------------- */ |
|
|
|
.docs-header { |
|
height: 530px; |
|
margin-top: 60px; |
|
background-color: #02122b; |
|
background-image: url(../img/header-bg.jpg); |
|
background-size: cover; |
|
box-shadow: inset 0 0 10px rgba(0,0,0,.6); |
|
} |
|
|
|
.docs-header-text { |
|
position: relative; |
|
z-index: 3; |
|
top: 140px; |
|
width: 800px; |
|
margin: 0 auto; |
|
color: #fff; |
|
text-align: center; |
|
text-shadow: 0 0 5px #000; |
|
-webkit-animation: fadeintext 2s; |
|
-moz-animation: fadeintext 2s; |
|
} |
|
|
|
.docs-header-subtitle { |
|
margin-bottom: 35px; |
|
font-size: 45px; |
|
font-weight: 300; |
|
line-height: 55px; |
|
} |
|
|
|
.docs-btn { |
|
display: inline-block; |
|
padding: 18px 40px; |
|
color: #fff; |
|
font-size: 24px; |
|
font-weight: 700; |
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); |
|
text-decoration: none; |
|
line-height: 1; |
|
background-color: #f26629; /* Old browsers */ |
|
background-image: -moz-linear-gradient(top, #f95e0c 0%, #e53003 100%); /* FF3.6+ */ |
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#e53003)); /* Chrome,Safari4+ */ |
|
background-image: -webkit-linear-gradient(top, #f95e0c 0%,#e53003 100%); /* Chrome10+,Safari5.1+ */ |
|
background-image: -o-linear-gradient(top, #f95e0c 0%,#e53003 100%); /* Opera 11.10+ */ |
|
background-image: -ms-linear-gradient(top, #f95e0c 0%,#e53003 100%); /* IE10+ */ |
|
background-image: linear-gradient(to bottom, #f95e0c 0%,#e53003 100%); /* W3C */ |
|
border-radius: 3px; |
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 5px rgba(0,0,0,.2); |
|
} |
|
|
|
.docs-btn:hover { |
|
color: #fff; |
|
background-color: #ff7234; /* Old browsers */ |
|
background-image: -moz-linear-gradient(top, #f95e0c 0%, #cd2a02 100%); /* FF3.6+ */ |
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#cd2a02)); /* Chrome,Safari4+ */ |
|
background-image: -webkit-linear-gradient(top, #f95e0c 0%,#cd2a02 100%); /* Chrome10+,Safari5.1+ */ |
|
background-image: -o-linear-gradient(top, #f95e0c 0%,#cd2a02 100%); /* Opera 11.10+ */ |
|
background-image: -ms-linear-gradient(top, #f95e0c 0%,#cd2a02 100%); /* IE10+ */ |
|
background-image: linear-gradient(to bottom, #f95e0c 0%,#cd2a02 100%); /* W3C */ |
|
} |
|
|
|
.docs-btn:active { |
|
padding: 19px 40px 17px; |
|
background-color: #cd2a02; |
|
background-image: none; |
|
box-shadow: inset 0 0 5px rgba(0,0,0,.4); |
|
} |
|
|
|
/* Styles for the social media buttons */ |
|
.social { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
padding: 20px 0; |
|
background-color: rgba(0,0,0,.3); |
|
-webkit-animation: fadeinsocial 2.5s; |
|
-moz-animation: fadeinsocial 2.5s; |
|
} |
|
|
|
.social ul { |
|
height: 20px; |
|
padding-left: 50px; |
|
list-style: none; |
|
text-align: center; |
|
} |
|
|
|
.social li { |
|
display: inline-block; |
|
height: 20px; |
|
padding: 0; |
|
vertical-align: top; |
|
} |
|
|
|
/* Overiding our framework button styles so our social buttons aren't messed up */ |
|
.twitter-follow-button, |
|
.twitter-follow-button:hover, |
|
.twitter-follow-button:active, |
|
.twitter-share-button, |
|
.twitter-share-button:hover, |
|
.twitter-share-button:active { |
|
padding: 0; |
|
border: none; |
|
border-radius: 0; |
|
background: none; |
|
box-shadow: none; |
|
} |
|
|
|
|
|
/* iPhone previewer |
|
-------------------------------------------------- */ |
|
|
|
.iphone { |
|
position: relative; |
|
top: 50px; |
|
float: right; |
|
width: 375px; |
|
height: 806px; |
|
font-family: "Helvetica Neue", sans-serif; |
|
background-image: url("../img/iphone.png"); |
|
} |
|
|
|
.iphone-fixed, |
|
.iphone-bottom { |
|
left: 50%; |
|
margin-left: 125px; |
|
} |
|
|
|
.iphone-fixed { |
|
position: fixed; |
|
top: 30px; |
|
} |
|
|
|
.iphone-bottom { |
|
position: absolute; |
|
top: auto; |
|
bottom: 130px; |
|
} |
|
|
|
.iphone .iphone-content { |
|
position: absolute; |
|
top: 147px; |
|
left: 27px; |
|
width: 320px; |
|
height: 548px; |
|
overflow: hidden; |
|
background-color: white; |
|
} |
|
|
|
.iphone .content, |
|
.component-example .content { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
} |
|
|
|
.component-example .content { |
|
position: relative; |
|
} |
|
|
|
/* Mad override to avoid it being styled like the block level link */ |
|
.component-example .list a[data-transition="slide-out"], |
|
.iphone .list a[data-transition="slide-out"] { |
|
padding: 0; |
|
display: inline; |
|
margin: 0; |
|
color: #0882f0; |
|
} |
|
|
|
/* Content layout |
|
-------------------------------------------------- */ |
|
|
|
.content-section { |
|
position: relative; |
|
padding-top: 80px; |
|
} |
|
|
|
/* Section header |
|
-------------------------------------------------- */ |
|
|
|
.section-header { |
|
padding-bottom: 30px; |
|
text-align: center; |
|
border-bottom: 1px solid #ddd; |
|
} |
|
|
|
.section-title { |
|
font-size: 60px; |
|
font-weight: 700; |
|
line-height: 1; |
|
color: #333; |
|
} |
|
|
|
.section-description { |
|
font-weight: 300; |
|
font-size: 24px; |
|
color: #777; |
|
} |
|
|
|
.section-informational { |
|
border-top: 1px solid #ddd; |
|
border-bottom: 1px solid #ddd; |
|
background-color: #fafafa; |
|
padding-bottom: 70px; |
|
} |
|
|
|
/* Getting started & page setup |
|
-------------------------------------------------- */ |
|
|
|
.steps { |
|
overflow: hidden; |
|
padding-top: 40px; |
|
} |
|
|
|
.steps .step { |
|
float: left; |
|
width: 306px; |
|
margin-right: 40px; |
|
list-style: none; |
|
} |
|
|
|
.step-title { |
|
font-size: 18px; |
|
font-weight: 700; |
|
} |
|
|
|
.step-description { |
|
color: #777; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.steps .step:last-child { |
|
margin-right: 0; |
|
} |
|
|
|
/* Components |
|
-------------------------------------------------- */ |
|
|
|
.section-components { |
|
padding-bottom: 350px; |
|
background-color: #fff; |
|
} |
|
|
|
.component { |
|
position: relative; |
|
padding-top: 80px; |
|
width: 550px; |
|
margin-top: 1px; |
|
font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif; |
|
font-weight: 300; |
|
opacity: .3; /* Fade content back until the user scrolls to it. */ |
|
-webkit-transition: opacity .2s ease-in-out; |
|
} |
|
|
|
.component:last-child { |
|
margin-bottom: 320px; |
|
} |
|
|
|
/* Active class applied when the specific component is in focus */ |
|
.component.active { |
|
opacity: 1; |
|
} |
|
|
|
.component-title { |
|
font-size: 28px; |
|
font-weight: 300; |
|
line-height: 35px; |
|
} |
|
|
|
.component-description { |
|
margin-bottom: 13px; |
|
color: #777; |
|
font-size: 18px; |
|
line-height: 26px; |
|
font-weight: 300; |
|
} |
|
|
|
.component-note { |
|
margin-top: 10px; |
|
color: #999; |
|
font-size: 14px; |
|
line-height: 18px; |
|
font-style: italic; |
|
} |
|
|
|
.component-title + .component-example { |
|
margin-top: 13px; |
|
} |
|
|
|
.content-section .prettyprint, |
|
.content-section .instruction-code { |
|
margin-top: 10px; |
|
padding: 10px; |
|
overflow-x: auto; |
|
font-size: 13px; |
|
font-family: monaco, menlo, monospace; |
|
color: #777; |
|
background-color: #fafafa; |
|
border: 1px solid #ddd; |
|
border-radius: 3px; |
|
} |
|
|
|
.prettyprint + .component-description, |
|
.component-note + .component-description { |
|
margin-top: 36px; |
|
} |
|
|
|
/* Content specific styles |
|
-------------------------------------------------- */ |
|
|
|
/* Make the example bars stay put in the docs */ |
|
.iphone [class*="bar"] { |
|
position: absolute; |
|
} |
|
|
|
/* Component examples on mobile */ |
|
.component-example { |
|
position: relative; |
|
display: none; |
|
margin-bottom: 20px; |
|
font-family: "Helvetica Neue", sans-serif; |
|
font-weight: normal; |
|
} |
|
|
|
.component-example-fullbleed { |
|
margin-right: -20px; |
|
margin-left: -20px; |
|
} |
|
|
|
/* Bar examples */ |
|
.component-example [class*="bar"] { |
|
position: relative; |
|
} |
|
|
|
.component-example .bar-header-secondary { |
|
top: 0; |
|
} |
|
|
|
/* List examples */ |
|
.component-example .list { |
|
margin-left: 0; |
|
margin-right: 0; |
|
background-color: #fff; |
|
} |
|
|
|
.component-example .list li { |
|
padding-right: 70px; |
|
padding-left: 20px; |
|
} |
|
|
|
.component-example .list.inset { |
|
margin: 0; |
|
} |
|
|
|
.iphone .list .segmented-controller-item, |
|
.component-example .list .segmented-controller-item { |
|
border-bottom-width: 0; |
|
} |
|
|
|
.iphone .list { |
|
margin-left: 0; |
|
margin-right: 0; |
|
} |
|
|
|
/* Button examples */ |
|
#buttons [class*="button"], |
|
#buttonsCounts [class*="button"], |
|
#blockButtons [class*="button"] { |
|
margin-bottom: 10px; |
|
} |
|
|
|
#buttons [class*="button"]:last-child, |
|
#buttonsCounts [class*="button"]:last-child, |
|
#blockButtons [class*="button"]:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
#blockButtonsInPhone .button-block { |
|
margin-left: 5px; |
|
margin-right: 5px; |
|
} |
|
|
|
#push .component-example { |
|
height: 108px; |
|
overflow: hidden; |
|
} |
|
|
|
#push .component-example .list { |
|
border-left: 1px solid rgba(0, 0, 0, .1); |
|
border-right: 1px solid rgba(0, 0, 0, .1); |
|
} |
|
|
|
.iphone .btn-section .button { |
|
display: block; |
|
margin: 0 auto; |
|
} |
|
|
|
.iphone .block-btn-section .block-button { |
|
margin-top: 10px; |
|
} |
|
|
|
.iphone .block-btn-section .block-button:first-child { |
|
margin-top: 100px; |
|
} |
|
|
|
#buttonsInPhone, |
|
#buttonsCountsInPhone { |
|
text-align: center; |
|
} |
|
|
|
#buttonsInPhone [class*="button"], |
|
#buttonsCountsInPhone [class*="button"] { |
|
margin-top: 10px; |
|
} |
|
|
|
#blockButtonsInPhone [class*="button"] { |
|
margin-top: 5px; |
|
} |
|
|
|
/* Counts examples */ |
|
#countsInPhone { |
|
text-align: center; |
|
} |
|
|
|
#countsInPhone [class*="count"] { |
|
margin-top: 10px; |
|
} |
|
|
|
/* Form examples */ |
|
.component-example form [class*="button"] { |
|
margin-bottom: 0; |
|
} |
|
|
|
.component .input-group label { |
|
padding: 9px 10px 9px 13px; |
|
} |
|
|
|
/* Toggle examples */ |
|
#toggles .toggle { |
|
display: inline-block; |
|
margin-right: 10px; |
|
} |
|
#togglesInPhone .toggle { |
|
margin: 10px auto 0; |
|
} |
|
|
|
/* Popover examples */ |
|
.component-example .popover { |
|
position: relative; |
|
display: block; |
|
top: 0; |
|
margin-top: 50px; |
|
opacity: 1; |
|
} |
|
#popoversInPhone .popover { |
|
position: absolute; |
|
display: block !important; |
|
top: 72px; |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Slider examples */ |
|
.component-example-fullbleed .slider, |
|
.component-example-fullbleed .slider li, |
|
.component-example-fullbleed .slider li img, |
|
#slidersInPhone .slider, |
|
#slidersInPhone .slider li, |
|
#slidersInPhone .slider li img { |
|
width: 100%; |
|
} |
|
|
|
#slidersInPhone .slider { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
} |
|
|
|
.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); |
|
} |
|
|
|
/* Give inset components in the iphone correct margin */ |
|
.iphone .list.inset, |
|
#segmentedControllersInPhone .segmented-controller, |
|
#formsInPhone form, |
|
#formsWithInputGroupInPhone form, |
|
#formsWithInputGroupAndLabelsInPhone form { |
|
margin: 10px; |
|
} |
|
|
|
#pushInPhone .list { |
|
margin-top: 44px; |
|
} |
|
|
|
/* Footer |
|
-------------------------------------------------- */ |
|
|
|
.docs-footer { |
|
padding-bottom: 100px; |
|
overflow: hidden; |
|
color: #fff; |
|
background-color: #151515; |
|
} |
|
|
|
.docs-footer .docs-inner-wrapper { |
|
text-align: center |
|
} |
|
|
|
.docs-footer h3 { |
|
font-size: 24px; |
|
color: #fefefe; |
|
font-weight: 700; |
|
} |
|
|
|
.docs-footer p { |
|
font-size: 18px; |
|
color: #777; |
|
} |
|
|
|
.avatars { |
|
display: block; |
|
width: 590px; |
|
margin: 30px auto 0; |
|
} |
|
|
|
.avatars li { |
|
float: left; |
|
height: 170px; |
|
width: 170px; |
|
margin-right: 40px; |
|
list-style: none; |
|
} |
|
|
|
.avatars .avatar { |
|
display: block; |
|
height: 100%; |
|
width: 100%; |
|
margin-bottom: 15px; |
|
overflow: hidden; |
|
border-radius: 100%; |
|
} |
|
|
|
.avatars li:last-child { |
|
margin-right: 0; |
|
} |
|
|
|
.avatars img { |
|
width: 170px; |
|
height: 170px; |
|
} |
|
|
|
/* Banner for Mozilla and IE about component rendering poorly |
|
------------------------------------------------------------- */ |
|
.notice-banner { |
|
cursor: pointer; |
|
height: 0; |
|
opacity: 0; |
|
padding: 0; |
|
color: #333; |
|
font-size: 16px; |
|
text-align: center; |
|
background-color: #fff9c4; /* Old browsers */ |
|
background-image: -moz-linear-gradient(top, #fff9c4 0%, #fff38d 100%); /* FF3.6+ */ |
|
background-image: -ms-linear-gradient(top, #fff9c4 0%,#fff38d 100%); /* IE10+ */ |
|
background-image: linear-gradient(to bottom, #fff9c4 0%,#fff38d 100%); /* W3C */ |
|
box-shadow: inset 0 -1px 0 rgba(0,0,0,.1); |
|
-moz-animation: shownotice 1s infinite; |
|
} |
|
|
|
/* Media queries |
|
-------------------------------------------------- */ |
|
|
|
@media only screen and (max-width: 1039px) { |
|
.docs-inner-wrapper { |
|
width: 920px; |
|
} |
|
|
|
.docs-header-text { |
|
width: 700px; |
|
} |
|
|
|
.steps .step { |
|
width: 280px; |
|
} |
|
|
|
.component { |
|
width: 500px; |
|
} |
|
|
|
.iphone-fixed, |
|
.iphone-bottom { |
|
margin-left: 85px; |
|
} |
|
} |
|
@media only screen and (min-width: 768px) and (max-width: 959px) { |
|
.docs-header-text, |
|
.docs-inner-wrapper { |
|
width: 700px; |
|
} |
|
|
|
.docs-header { |
|
height: 400px; |
|
} |
|
|
|
.docs-header-text { |
|
top: 75px; |
|
} |
|
|
|
.steps .step { |
|
width: 205px; |
|
} |
|
|
|
.component { |
|
width: 300px; |
|
} |
|
|
|
.iphone-fixed, |
|
.iphone-bottom { |
|
margin-left: -25px; |
|
} |
|
} |
|
@media only screen and (max-width: 767px) { |
|
.docs-outer-wrapper, |
|
.docs-inner-wrapper, |
|
.docs-header-text, |
|
.docs-content, |
|
.component { |
|
width: auto; |
|
} |
|
|
|
.docs-inner-wrapper { |
|
padding-right: 20px; |
|
padding-left: 20px; |
|
} |
|
|
|
/* Have the masthead scroll away instead of being fixed */ |
|
.docs-masthead { |
|
position: absolute; |
|
padding: 2px 0 1px; |
|
} |
|
|
|
.docs-masthead-title { |
|
font-size: 18px; |
|
text-align: center; |
|
} |
|
|
|
/* Hide the navigation on mobile. Scroll away! */ |
|
.docs-navigation { |
|
display: none; |
|
} |
|
|
|
.docs-header { |
|
height: 320px; |
|
margin-top: 44px; |
|
} |
|
|
|
.docs-header-text { |
|
top: 50px; |
|
} |
|
|
|
.docs-header-subtitle { |
|
margin-bottom: 18px; |
|
font-size: 24px; |
|
line-height: 30px; |
|
} |
|
|
|
.docs-btn { |
|
width: 100%; |
|
padding: 15px 0; |
|
font-size: 18px; |
|
} |
|
|
|
.docs-btn:active { |
|
padding: 16px 0 14px; |
|
} |
|
|
|
.social ul { |
|
height: auto; |
|
} |
|
|
|
.social li { |
|
padding-bottom: 15px; |
|
} |
|
|
|
.social li:last-child { |
|
padding-bottom : 0; |
|
} |
|
|
|
.content-section { |
|
padding-top: 50px; |
|
} |
|
|
|
.section-header { |
|
padding-bottom: 50px; |
|
} |
|
|
|
.section-title { |
|
margin-bottom: 5px; |
|
font-size: 40px; |
|
} |
|
|
|
.section-description { |
|
font-size: 18px; |
|
line-height: 24px; |
|
} |
|
|
|
.section-components { |
|
padding-bottom: 0px; |
|
} |
|
|
|
.section-informational { |
|
padding-bottom: 70px; |
|
} |
|
|
|
.steps .step { |
|
float: none; |
|
width: auto; |
|
margin: 0 0 30px 0; |
|
} |
|
|
|
.steps .step:last-child { |
|
margin: 0; |
|
} |
|
|
|
.notice-banner { |
|
position: relative; |
|
top: 0; |
|
font-size: 14px; |
|
line-height: 18px; |
|
} |
|
|
|
.notice-banner:after { |
|
display: none; |
|
} |
|
|
|
.component { |
|
padding: 50px 20px; |
|
margin-left: -20px; |
|
margin-right: -20px; |
|
opacity: 1; |
|
border-bottom: 1px solid #ddd; |
|
} |
|
|
|
.component:last-child { |
|
margin-bottom: 80px; |
|
} |
|
|
|
.component-example { |
|
display: block; |
|
} |
|
|
|
/* Hacky way to get parent of slider position absolute for smooth sliding */ |
|
#sliders .slider { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: 10000; |
|
} |
|
#sliders .prettyprint:not(.js) { |
|
margin-top: 230px; |
|
} |
|
|
|
.avatars { |
|
overflow: hidden; |
|
width: 280px; |
|
margin: 10px auto 0; |
|
} |
|
|
|
.avatars li { |
|
height: 86px; |
|
width: 86px; |
|
margin-right: 10px; |
|
} |
|
|
|
.avatars li:last-child { |
|
margin-right: 0; |
|
} |
|
|
|
.avatars img { |
|
width: 86px; |
|
height: 86px; |
|
} |
|
|
|
/* Hide the iPhone on mobile */ |
|
.iphone { |
|
display: none; |
|
} |
|
} |
|
|
|
@media only screen and (max-width: 320px) { |
|
.docs-header-text { |
|
top: 30px; |
|
} |
|
} |
|
|
|
/* Animations |
|
-------------------------------------------------- */ |
|
|
|
@-webkit-keyframes fadeintext { |
|
0% { |
|
opacity: 0; |
|
-webkit-transform: translateY(20px); |
|
} |
|
50% { |
|
opacity: 0; |
|
-webkit-transform: translateY(20px); |
|
} |
|
100% { |
|
opacity: 1; |
|
-webkit-transform: translateY(0); |
|
} |
|
} |
|
|
|
@-webkit-keyframes fadeinsocial { |
|
0% { |
|
opacity: 0; |
|
} |
|
85% { |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
@-moz-keyframes fadeintext { |
|
0% { |
|
opacity: 0; |
|
-moz-transform: translateY(20px); |
|
} |
|
50% { |
|
opacity: 0; |
|
-moz-transform: translateY(20px); |
|
} |
|
100% { |
|
opacity: 1; |
|
-moz-transform: translateY(0); |
|
} |
|
} |
|
|
|
@-moz-keyframes fadeinsocial { |
|
0% { |
|
opacity: 0; |
|
} |
|
85% { |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
@-moz-keyframes shownotice { |
|
0% { |
|
min-height: 30px; |
|
padding: 20px 0; |
|
opacity: 1; |
|
} |
|
100% { |
|
min-height: 30px; |
|
padding: 20px 0; |
|
opacity: 1; |
|
} |
|
} |
|
|
|
/* Add Firefox support for CSS to docs since Ratchet framework doesn't natively support Mozilla |
|
-------------------------------------------------- */ |
|
|
|
/* Bars.css */ |
|
[class*="bar-"] { |
|
-moz-box-sizing: border-box; |
|
} |
|
.bar-title, |
|
.tab-inner { |
|
display: -moz-box; |
|
-moz-box-orient: horizontal; |
|
} |
|
.tab-item { |
|
-moz-box-sizing: border-box; |
|
-moz-box-flex: 1; |
|
} |
|
.bar-title [class*="button"] { |
|
-moz-box-flex: 0; |
|
} |
|
.bar-title .segmented-controller { |
|
-moz-box-flex: 1; |
|
} |
|
|
|
/* forms.css */ |
|
select, |
|
textarea, |
|
input[type="text"], |
|
input[type=search], |
|
input[type="password"], |
|
input[type="datetime"], |
|
input[type="datetime-local"], |
|
input[type="date"], |
|
input[type="month"], |
|
input[type="time"], |
|
input[type="week"], |
|
input[type="number"], |
|
input[type="email"], |
|
input[type="url"], |
|
input[type="tel"], |
|
input[type="color"], |
|
.input-group { |
|
-moz-box-sizing: border-box; |
|
} |
|
|
|
/* lists.css */ |
|
.list.inset { |
|
-moz-box-sizing: border-box; |
|
} |
|
|
|
/* popovers.css */ |
|
.popover-header { |
|
display: -moz-box; |
|
} |
|
|
|
/* segmented-controller.css*/ |
|
.segmented-controller { |
|
display: -moz-box; |
|
-moz-box-orient: horizontal; |
|
} |
|
.segmented-controller li { |
|
-moz-box-flex: 1; |
|
} |
|
|
|
/* Get tab-bar to look 1/2way decent */ |
|
.iphone .tab-item { |
|
min-width: 64px; |
|
} |