| //----------------------------------------------------------------------- |
| // General Elements |
| //----------------------------------------------------------------------- |
| |
| figure { |
| margin: $default-padding 0; |
| img { |
| border: $default-border; |
| } |
| } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| margin: 2em 0; |
| line-height: 1.5em; |
| } |
| table caption { |
| margin-bottom: 1em; |
| text-align: left; |
| font-weight: bold; |
| } |
| th { |
| border: $default-border; |
| font-weight: bold; |
| background: darken($gray-light, 5%); |
| } |
| tr { |
| border-bottom: $default-border; |
| } |
| table + tr { |
| border-top: $default-border; |
| } |
| td, th { |
| padding: 1em 1.5em; |
| text-align: left; |
| border: $default-border; |
| } |
| |
| pre { |
| background-color: #f7f7f7; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15); |
| margin: 1em 0 0 0; |
| padding: .99em; |
| position: relative; |
| overflow-x: auto; |
| word-wrap: normal; |
| white-space: pre; |
| font-size: 0.95em; |
| line-height: 1.8em; |
| a { |
| text-decoration: underline!important; |
| } |
| b { |
| background: yellow; |
| font-weight: normal; |
| } |
| strike { |
| text-decoration: none; |
| background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px); |
| } |
| &[data-filename]::after { |
| visibility: hidden; |
| } |
| &[data-filename]:hover::after { |
| visibility: visible; |
| } |
| } |
| |
| |
| //----------------------------------------------------------------------- |
| // General Classes |
| //----------------------------------------------------------------------- |
| |
| .element-invisible { |
| @include element-invisible; |
| } |
| |
| .hidden { |
| display: none; |
| } |
| |
| .label { |
| color: inherit; |
| text-transform: uppercase; |
| margin-bottom: 5px; |
| font-size: $small-label-size; |
| font-weight: bold; |
| } |
| |
| .published { |
| font-size: $small-label-size; |
| font-style: italic; |
| color: $gray-light-dark; |
| line-height: $base-line-height * 0.7; |
| } |
| |
| .description { |
| margin: $default-padding 0; |
| |
| &:last-child { |
| margin-bottom: 0; |
| } |
| } |
| |
| |
| #gc-footer { |
| background: $gray-light; |
| } |
| |
| // Big blue buttonz! |
| .button { |
| background: #0370ea; |
| background-image: linear-gradient(top, #008dfd 0%,#0370ea 100%); |
| border: 1px solid #076bd2; |
| border-radius: 3px; |
| color: $white !important; |
| display: inline-block; |
| font-size: 13px; |
| font-weight: 700; |
| line-height: 1.3; |
| padding: 5px 20px; |
| text-align: center; |
| text-decoration: none !important; |
| text-shadow: 1px 1px 1px #076bd2; |
| |
| &:hover { |
| background-image: linear-gradient(top, #008dfd 30%,#0370ea 100%); |
| cursor: pointer; |
| } |
| |
| a { |
| color: inherit !important; |
| } |
| } |
| |
| .button-alt { |
| background: #eee; |
| background-image: linear-gradient(bottom, #DCDCDC 46%, #FAFAFA 87%); |
| border: 1px solid #d6d6d6; |
| border-radius: 3px; |
| color: #333 !important; |
| display: inline-block; |
| font-size: 12px; |
| font-weight: 700; |
| line-height: 24px; |
| padding: 0 15px; |
| text-align: center; |
| text-decoration: none !important; |
| text-shadow: none; |
| |
| &:hover { |
| background-image: linear-gradient(bottom, #DCDCDC 20%, #FAFAFA 87%); |
| cursor: pointer; |
| } |
| } |
| |
| // Feedback and scroll to top buttons. |
| .google-button { |
| background-color: $gray-light; |
| border-radius: 2px 0 0 0; |
| border: 1px solid rgba(0,0,0,0.1); |
| padding: 5px 12px; |
| text-align: center; |
| white-space: nowrap; |
| |
| &:hover { |
| border-color: #c6c6c6; |
| box-shadow: 0 -1px 1px rgba(0,0,0,0.1); |
| } |
| &:active { |
| background-color: #f1f1f1; |
| box-shadow: inset 0 0px 2px rgba(0,0,0,0.2); |
| } |
| } |
| |
| .screenshot, |
| .screenshot img { |
| margin: 1em 0; |
| } |
| |
| .video-container { |
| position: relative; |
| padding-bottom: 56.25%; |
| padding-top: 30px; |
| height: 0; |
| overflow: hidden; |
| margin: 0 0 20px 0; |
| } |
| .video-container iframe, |
| .video-container object, |
| .video-container embed { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| p, div, aside { |
| &.note, |
| &.caution, |
| &.warning { |
| background-color: $gray-light; |
| border-bottom: 1px solid; |
| border-top: 1px solid; |
| overflow: hidden; |
| max-width: 85%; |
| padding: 1em; |
| //border: none; |
| //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15); |
| |
| } |
| &.note { |
| border-color: #36C; |
| } |
| &.caution { |
| border-color: #FC3; |
| } |
| &.warning { |
| border-color: #A03; |
| em, strong { |
| color: #A03; |
| } |
| } |
| } |
| |
| .permalink { |
| display: none; |
| margin-left: 5px; |
| } |
| .has-permalink:hover .permalink { |
| display: initial; |
| } |
| .no-permalink .permalink { |
| display: none !important; |
| } |
| |
| //----------------------------------------------------------------------- |
| // Specific Elements |
| //----------------------------------------------------------------------- |
| |
| #gc-footer { |
| .links { |
| a { |
| margin-right: $default-padding; |
| } |
| } |
| #cc-info { |
| font-size: $small-label-size; |
| } |
| } |
| |
| #social-buttons { |
| @include display-flex(); |
| @include justify-content(flex-end); |
| @include align-items(center); |
| |
| > * { |
| margin-left: 10px; |
| } |
| |
| img { |
| margin: -4px 0 0 1px; |
| } |
| } |
| |
| // @media only screen and (min-width: $break-small) { |
| // #gc-pagecontent { |
| // > .g-section { |
| // padding: $main-content-top-margin / 2 0 $main-content-top-margin; |
| // } |
| // } |
| // .g-unit { |
| // &.g-last { |
| // .g-content { |
| // border-bottom: none; |
| // } |
| // } |
| // .g-content { |
| // margin-top: $default-padding; |
| // margin-right: 0; |
| // &:last-child { |
| // padding-bottom: $default-padding; |
| // } |
| // } |
| // } |
| // } |
| |
| |
| // Phone |
| @media only screen and (max-width: $break-small) { |
| .more-section { |
| .g-last { |
| .g-content { |
| padding-bottom: 0; |
| border: none; |
| } |
| } |
| .g-content { |
| border: $default-border; |
| border-width: 0 0 1px 0; |
| padding-bottom: $default-padding; |
| margin-bottom: $default-padding; |
| } |
| } |
| #gc-footer { |
| .links { |
| a { |
| display: inline-block; |
| } |
| } |
| } |
| } |
| |
| |
| #scroll-to-top, |
| #send-feedback { |
| border-bottom: none; |
| bottom: 0; |
| position: fixed; |
| z-index: 5; |
| } |
| #scroll-to-top { |
| border-left: 0; |
| left: 0; |
| } |
| #send-feedback { |
| border-right: 0; |
| right: 0; |
| } |
| |
| |
| //----------------------------------------------------------------------- |
| // UNCLEAR IF NEEDED. Move things up as needed. ================ |
| //----------------------------------------------------------------------- |
| |
| /* |
| ul.condensed { |
| margin: 0.5em 0; |
| li { |
| margin-top: 0; |
| } |
| } |
| |
| pre { |
| &[data-filename] .filename { |
| background-color: #777; |
| padding: 2px 12px; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| */ |
| |
| /* |
| #gc-sidebar { |
| width: 185px; |
| float: left; |
| |
| // scroll.js adds and removes the floating class depending on the scroll position. |
| &.floating { |
| overflow: auto; |
| position: fixed; |
| top: 0; bottom: 0; |
| } |
| |
| // Sidebar link/button styling. |
| span, a { |
| color: black; |
| display: block; |
| font-weight: normal; |
| position: relative; |
| |
| &.level2 { |
| font-weight: bold; |
| } |
| } |
| a:hover, |
| a.selected { |
| color: #0d68ae; |
| } |
| |
| a.button, |
| .level3, |
| .level4 { |
| color: #444; |
| } |
| |
| .toggleIndicator { |
| background: url(../../images/toggle_sprite.png) no-repeat 0 0; |
| height: 8px; |
| position: absolute; |
| right: 0; |
| top: 3px; |
| width: 8px; |
| |
| &.toggled { |
| background-position: 0 -9px; |
| } |
| } |
| |
| // Sidebar list styling. |
| /* ul { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| |
| &.level2 { |
| margin-left: 10px; |
| padding-top: 10px; |
| } |
| &.level3, |
| &.level4, |
| &.level5 { |
| margin-left: 20px; |
| padding-top: 10px; |
| } |
| } |
| |
| li { |
| line-height: 120%; |
| margin: 0; |
| padding: 8px 0; |
| |
| &.level2 { |
| border-top: 1px solid #F5F5F5; |
| |
| &:first-child { |
| border-top: none; |
| } |
| } |
| } |
| } |
| *//* |
| #toc { |
| background-color: #F5F5F5; |
| border-bottom: 20px solid white; */ |
| /* We want this element to have a visual left-margin of 20px, but margins on |
| floated elements don't affect the borders and background of the elements |
| they float over. So we add this border to force the issue. */ |
| /* border-left: 20px solid white; |
| float: right; |
| margin: 5px 0px 0px 0px; |
| padding: 5px; |
| position: relative; |
| width: 250px; |
| word-break: break-word; |
| z-index: 3; |
| |
| * { |
| list-style: none; |
| overflow: hidden; |
| padding: 0; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| a { |
| color: black; |
| } |
| |
| h2 { |
| border: none; |
| font-size: 100%; |
| font-weight: bold; |
| margin: 0; |
| padding: 0; |
| } |
| |
| ol { |
| margin: 1em 0 0 0; |
| |
| li { |
| line-height: 1.2em; |
| margin: .5em 0 .5em 1em; |
| |
| ol { |
| margin: 0; |
| |
| li { |
| margin: .5em 0 0 1em; |
| } |
| } |
| } |
| } |
| |
| .api-reference { |
| border-top: 1px solid #e5e5e5; |
| } |
| } |
| |
| .filtered_item { |
| line-height: 6px; |
| } |
| |
| #filtered_apis { |
| margin-top: 5px; |
| } |
| |
| #skipto { |
| display: none; |
| } |
| */ |
| /* List with largeish images floated to the right. */ |
| /*.imaged { |
| li { |
| clear: right; |
| |
| img { |
| float: right; |
| margin-bottom: 1em; |
| } |
| } |
| + p { |
| clear: right; |
| } |
| }*/ |
| |
| // small indent for better visual distinction (e.g., in a long list) |
| /*.indent-small { |
| margin-left: 2em; |
| }*/ |
| |
| /* Tabbed pane with header (tabs) and content */ |
| /* |
| tabs { |
| display: block; |
| margin: 25px 0; |
| |
| header { |
| background: inherit; |
| border: 1px solid #ccc; |
| border-bottom: 1px solid white; |
| cursor: auto; |
| display: inline-block; |
| margin-bottom: 0; |
| padding: 10px; |
| outline: none; |
| |
| &.unselected { |
| background: #eee; |
| border-bottom: 1px solid #ccc; |
| cursor: pointer; |
| } |
| } |
| content { |
| border: 1px solid #ccc; |
| display: block; |
| margin-top: -1px; |
| padding: 20px; |
| |
| &.unselected { |
| display: none; |
| } |
| |
| pre { |
| margin: 0; |
| padding: 10px; |
| } |
| } |
| } */ |
| |
| /* |
| * API references. |
| */ |
| /* |
| .type_name, |
| .property { |
| font-style: italic; |
| } |
| |
| .api_reference { |
| div.summary { |
| background-color: #CADEF4; |
| border: 1px solid #93B4D9; |
| font-family: "Courier New", courier, monospace; |
| margin-top: 1em; |
| padding: 0.5em; |
| text-indent: -1.5em; |
| |
| .line { |
| padding-left: 1.5em; |
| text-indent: -1.5em; |
| } |
| |
| .subdued { |
| color: #7594B8; |
| } |
| } |
| |
| div.description { |
| margin-left: 2em; |
| } |
| */ |
| /* This style is used because types with functions prefix the function with the |
| * type name, using a lowercase first letter. */ |
| /* .uncapitalize:first-letter { |
| text-transform: lowercase; |
| } |
| |
| .capitalize:first-letter { |
| text-transform: uppercase; |
| } |
| } |
| |
| .optional { |
| color: #7D7D7D; |
| } |
| */ |