hljs { display: block; overflow-x: auto; padding: 0; background: #0C2238; color: white; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; line-height: 1.45; tab-size: 2; -webkit-font-smoothing: auto; -webkit-text-size-adjust: none; position: relative; border-radius: 2px; margin: 0 0 1em; } hljs:before { content: attr(lang); display: block; background: #1C5792; color: white; line-height: 48px; padding: 0 16px; border-radius: 2px 2px 0 0; } hljs.no-header:before { display: none; } .hljs-tag, .hljs-tag .hljs-title, .hljs-keyword, .hljs-literal, .hljs-strong, .hljs-change, .hljs-winutils, .hljs-flow, .nginx .hljs-title, .tex .hljs-special { color: #E5C3A2; } hljs { color: #ddd; } hljs .hljs-constant, .asciidoc .hljs-code, .markdown .hljs-code { color: #80CBC4; } .hljs-code, .hljs-class .hljs-title, .hljs-header { color: white; } .hljs-link_label, .hljs-attribute, .hljs-symbol, .hljs-symbol .hljs-string, .hljs-value, .hljs-params, .hljs-regexp { color: #7DB9F4; } .hljs-link_url, .hljs-tag .hljs-value, .hljs-string, .hljs-bullet, .hljs-subst, .hljs-title, .hljs-emphasis, .hljs-type, .hljs-preprocessor, .hljs-pragma, .ruby .hljs-class .hljs-parent, .hljs-built_in, .django .hljs-template_tag, .django .hljs-variable, .smalltalk .hljs-class, .hljs-javadoc, .django .hljs-filter .hljs-argument, .smalltalk .hljs-localvars, .smalltalk .hljs-array, .hljs-attr_selector, .hljs-pseudo, .hljs-addition, .hljs-stream, .hljs-envvar, .apache .hljs-tag, .apache .hljs-cbracket, .tex .hljs-command, .hljs-prompt, .hljs-name { color: #9ccc65; } .hljs-comment, .hljs-annotation, .smartquote, .hljs-blockquote, .hljs-horizontal_rule, .hljs-decorator, .hljs-pi, .hljs-doctype, .hljs-deletion, .hljs-shebang, .apache .hljs-sqbracket, .tex .hljs-formula { color: #607D8B; } .coffeescript .javascript, .javascript .xml, .tex .hljs-formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .hljs-cdata { opacity: 0.5; } demo-include { display: block; } /* For documentation printing purposes, set background color */ @media print { .demo-content { background-color: white !important; } } .colorNested .demo-content > div div { padding: 8px; box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.26); opacity: 0.9; color: white; text-align: center; } .colorNested-noPad .demo-content > div div { box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.26); opacity: 0.9; color: white; text-align: center; } .colorNested .demo-content > div div:nth-child(1), .colorNested-noPad .demo-content > div div:nth-child(1) { background-color: #009688; } .colorNested .demo-content > div div:nth-child(2), .colorNested-noPad .demo-content > div div:nth-child(2) { background-color: #3949ab; } .colorNested .demo-content > div div:nth-child(3), .colorNested-noPad .demo-content > div div:nth-child(3) { background-color: #9c27b0; } .colorNested .demo-content > div div:nth-child(4), .colorNested-noPad .demo-content > div div:nth-child(4) { background-color: #8bc34a; } .colorNested .demo-content > div div:nth-child(5), .colorNested-noPad .demo-content > div div:nth-child(5) { background-color: #deb867; } .colorNested .demo-content > div div:nth-child(6), .colorNested-noPad .demo-content > div div:nth-child(6) { background-color: #FF5722; } .colorNested .demo-content > div div:nth-child(7), .colorNested-noPad .demo-content > div div:nth-child(7) { background-color: #03A9F4; } .layout-content md-divider { margin-top: 16px; } .layout-demo :not(.layout-row), .layout-demo :not(.layout-column) { border: 1px solid #eee; padding: 8px; } .layout-content .demo-box { box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.26); padding: 16px; } .layout-panel-parent { height: 200px; width: 100%; position: relative; z-index: 2; } [ng-panel] { transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1); -webkit-transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1); position: absolute; left: 0; top: 0; width: 100%; height: 100%; } [ng-panel].ng-enter { transform: translate3d(0, -15%, 0); opacity: 0.1; z-index: 1; } [ng-panel].ng-enter.ng-enter-active, [ng-panel].ng-leave { transform: translate3d(0, 0, 0); opacity: 1; } [ng-panel].ng-leave.ng-leave-active { transform: translate3d(0, 0, 0); opacity: 0.5; } [ng-panel] .demo-content { background: white; } @media screen and (-ms-high-contrast: active) { .colorNested > div { border: 1px solid #fff !important; } } html { font-size: 62.5%; line-height: 1.4; } body { font-size: 1.6rem; } /* This styling should be not applied to codepen demos, so we need to add a unique identifier. */ body.docs-body { overflow: hidden; max-width: 100%; max-height: 100%; } .md-api-table { margin-bottom: 16px; max-width: 100%; width: 100%; border-spacing: 0; border-radius: 2px; overflow: hidden; } /* Center the doc tool icons at the top */ .docs-tools .md-button.md-icon-button { min-height: 0; height: auto; } #license-footer { align-self: flex-end; padding: 16px 32px; width: 100%; text-align: center; font-size: small; border-top: 1px solid #ddd; } .training_link { color: rgb(255,82,82); text-transform: none; } .training_site { text-transform: none; } .training_info { opacity:0.4; text-transform: none; } /*************** * TYPE DEFAULTS ***************/ a { text-decoration: none; font-weight: 400; -webkit-transition: border-bottom 0.35s; -moz-transition: border-bottom 0.35s; -ms-transition: border-bottom 0.35s; -o-transition: border-bottom 0.35s; transition: border-bottom 0.35s; } h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; margin-top: 1rem; } h1 { font-size: 3.400rem; font-weight: 400; line-height: 4rem; } h2 { font-size: 2.400rem; font-weight: 400; line-height: 3.2rem; } h3 { font-size: 2.000rem; font-weight: 500; letter-spacing: 0.005em; } h4 { font-size: 1.600rem; font-weight: 400; letter-spacing: 0.010em; line-height: 2.4rem; } p { font-size: 1.6rem; font-weight: 400; letter-spacing: 0.010em; line-height: 1.6em; margin: 0.8em 0 1.6em; } strong { font-weight: 500; } .md-api-table td, .md-api-table th { padding: 12px 16px; text-align: left; } .md-api-table td { vertical-align: top; } .md-api-table td.description *:first-child { margin-top: 0; } .md-api-table td.description *:last-child { margin-bottom: 0; } .md-api-table tr:nth-child(odd) td { background-color: #E3ECF5; } .md-api-table tr:nth-child(even) td { background-color: #D1DEEC; } .md-api-table th { background-color: #4C9EF0; color: white; } blockquote { border-left: 3px solid rgba(0, 0, 0, 0.12); font-style: italic; margin-left: 0; padding-left: 16px; } ul { margin: 0; padding: 0; } ul li { margin-left: 16px; padding: 0; margin-top: 3px; list-style-position: inside; } ul li:first-child { margin-top: 0; } /************ * UTILS ************/ ul.skip-links li { list-style: none; margin: 0; padding: 0; } ul.skip-links li a { background-color: #fff; display: block; margin: 0.5em 0 0.5em 0.5em; opacity: 0; left: 0; position: absolute; text-decoration: none; top: 0; width: 92%; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } ul.skip-links li a:focus { background-color: #fff !important; opacity: 1; z-index: 2; } /******************* * CODE HIGHLIGHTING *******************/ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } pre > code.highlight { padding: 16px; font-weight: 400; } pre, code { margin: 0; padding: 0; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; overflow-wrap: break-word; } pre > code.highlight { background-color: transparent; font-weight: 400; padding: 16px; } code { font-size: 1.4rem; background: rgba(0, 0, 0, 0.065); } code.highlight { display: block; overflow-wrap: break-word; } code:not(.highlight) { color: #106CC8; margin-left: 1px; margin-right: 1px; -webkit-font-smoothing: auto; padding: 0.125em 0.35em; border-radius: 2px; } .layout-content code.highlight { margin-bottom: 15px; } /************ * DOCS MENU ************/ .site-sidenav { background: #106CC8; } .site-sidenav md-content { background: transparent; } .site-sidenav, .site-sidenav.md-locked-open-add-active, .site-sidenav.md-locked-open { width: 272px; min-width: 272px; max-width: 272px; } .site-sidenav > * { min-width: 218px; } .docs-menu, .docs-menu ul { list-style: none; padding: 0; max-width: 100%; overflow-x: hidden; } .docs-menu li { margin: 0; } .docs-menu > li:nth-child(1) { border-top: none; } .md-whiteframe-glow-z1 { box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 0px 2px 2px rgba(0, 0, 0, 0.098), 0px 0px 5px 1px rgba(0, 0, 0, 0.084); } .docs-menu > li { border-bottom: 1px solid #267ED5; } .docs-menu .md-button { border-radius: 0; color: white; cursor: pointer; display: block; align-items: inherit; line-height: 40px; margin: 0; max-height: 40px; overflow: hidden; padding: 0px 16px; text-align: left; text-decoration: none; white-space: normal; width: 100%; } html[dir=rtl] .docs-menu .md-button, body[dir=rtl] .docs-menu .md-button { unicode-bidi: embed; text-align: right; } .docs-menu .md-button:hover, .docs-menu .md-button:focus { background: #267ED5 !important; } .docs-menu .md-button md-icon { color: white; } .docs-menu md-select { /* Override md-select margins. With margins the menu will look incorrect and causes mobile list to not be scrollable. */ margin: 0; width: 100%; } .docs-menu md-select md-select-label { justify-content: flex-end; padding-top: 10px; } .docs-menu md-select md-select-label span { margin-right: auto; padding-left: 13px; } .docs-menu md-select .md-select-icon { margin-right: 28px; } .docs-menu button.md-button::-moz-focus-inner { padding: 0; } .docs-menu .md-button.active { background: #267ED5; } .menu-heading { display: block; line-height: 32px; margin: 0; padding: 8px 16px 0; text-align: left; width: 100%; color: rgba(255, 255, 255, 0.54) } html[dir=rtl] .menu-heading, body[dir=rtl] .menu-heading { unicode-bidi: embed; text-align: right; } .docs-menu li.parentActive, .docs-menu li.parentActive .menu-toggle-list { /*background-color: #2C80D2 !important;*/ } .menu-toggle-list { overflow: hidden; position: relative; z-index: 1; -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1); -webkit-transition-property: height; -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1); -moz-transition-property: height; transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1); transition-property: height; } .docs-menu .menu-toggle-list a.md-button { display: block; padding: 0 16px 0 32px; text-transform: none; text-rendering: optimizeLegibility; font-weight: 500; } .parent-list-item:last-child { margin-bottom: 20px; /* Prevent the hidden License link from causing a double bottom-border */ border-bottom: none; } .md-button-toggle .md-toggle-icon { display: block; margin-left: auto; speak: none; vertical-align: middle; transform: rotate(180deg); -webkit-transform: rotate(180deg); transition: transform 0.3s ease-in-out; -webkit-transition: -webkit-transform 0.3s ease-in-out; } .md-button-toggle .md-toggle-icon.toggled { transform: rotate(0deg); -webkit-transform: rotate(0deg); } /* End Docs Menu */ .docs-logo { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 0 0 16px; margin: 0 auto; } .docs-logo:focus { outline: none; } .docs-logo > img { height: 150px; width: auto; display: block; transform-origin: 50% 0; transform: scale(1.2); } /*.nav-header {*/ /*background-color: #106CC8;*/ /*background: linear-gradient(#185694, #106cc8);*/ /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #185694), color-stop(1, #106cc8));*/ /*background: -webkit-linear-gradient(top, #185694 0%, #106cc8 100%);*/ /*background: -moz-linear-gradient(top, #185694 0%, #106cc8 100%);*/ /*background: linear-gradient(top, #185694 0%, #106cc8 100%);*/ /*border-bottom: 1px solid #267ED5;*/ /*flex-shrink: 0;*/ /*z-index: 2;*/ /*}*/ a.docs-logo { border-bottom: none; } .docs-logotype { color: white; text-align: center; font-weight: 400; font-size: 26px; } .docs-menu-separator-icon { margin: 0; } .docs-menu-separator-icon img { height: 16px; } .md-breadcrumb { font-size: 24px !important; font-weight: 400 !important; } .md-breadcrumb md-icon { color: #666 !important; fill: #666 !important; } .md-breadcrumb-page { display: inline-block; word-wrap: break-word; } .docs-toolbar-tools { max-width: 864px; padding: 0; margin: 0 24px; width: auto; } .docs-tools .md-button, .docs-tools .md-button md-icon { color: #666 !important; } .docs-toolbar-tools .md-button md-icon { color: #666 !important; fill: #666 !important; } @media (max-width: 400px) { .docs-tools { display: none; } } .layout-content, .doc-content { max-width: 864px; margin: 16px; box-sizing: border-box; } docs-demo { display: block; margin-top: 16px; } .doc-description p { margin-top: 0; } .demo-container { border-radius: 4px; margin-bottom: 16px; -webkit-transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1); transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1); position: relative; padding-bottom: 0; } .demo-source-tabs { z-index: 1; -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1); transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1); height: 448px; background: #fff; overflow: hidden; } .demo-source-tabs md-tabs-wrapper { background-color: #2C80D2 !important; } md-tabs.demo-source-tabs md-tab, md-tabs.demo-source-tabs .md-header { background-color: #444444 !important; } md-tabs.demo-source-tabs md-tab-label { color: #ccc !important; } md-tabs.demo-source-tabs .active md-tab-label { color: #fff !important; } .demo-source-tabs.ng-hide { min-height: 0; height: 0; } .demo-source-tabs { position: relative; width: 100%; z-index: 0; } .demo-content { position: relative; overflow:hidden; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex; } .small-demo .demo-source-tabs:not(.ng-hide) { height: 224px; } .small-demo .demo-content { min-height: 128px; } .doc-content > * { -webkit-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .demo-content > * { -webkit-box-flex: 1 1 0%; -webkit-flex: 1 1 0%; -moz-box-flex: 1 1 0%; -moz-flex: 1 1 0%; -ms-flex: 1 1 0%; flex: 1 1 0%; } .demo-content > div[layout-fill] { min-height: 448px; } .demo-content > div.layout-fill { min-height: 448px; } .small-demo .demo-content > div[layout-fill] { min-height: 224px; } .small-demo .demo-content > div.layout-fill { min-height: 224px; } .layout-content .small-demo .demo-content > div[layout], .layout-options .small-demo .demo-content > div.layout { min-height: auto !important; max-height: auto !important; height: 128px !important; } .small-demo .demo-toolbar, .small-demo .md-toolbar-tools { min-height: 48px; max-height: 48px; } md-toolbar.demo-toolbar { border-radius: 3px 3px 0 0; box-shadow: 0 1px rgba(255, 255, 255, 0.1); } md-toolbar.demo-toolbar md-tab-label { color: #99E4EE } md-toolbar.demo-toolbar .md-button:hover { background: rgba(0,0,0,0.1); } md-toolbar.demo-toolbar .md-button.active, md-toolbar.demo-toolbar .md-button.active md-icon { color: #418CD6; } md-toolbar.demo-toolbar .md-button { -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear; color: #616161; } .demo-source-container { display: block; border: 1px solid #ddd; background-color: #f6f6f6; height: 400px; } .demo-source-container hljs { margin-bottom: 0; border-radius: 0; } .show-source div[demo-include] { border-top: #ddd solid 2px; } .docs-list { padding: 16px; } .docs-descriptions h4 { margin: 0; } .docs-list md-divider { margin: 8px 0; } .docs-list li { list-style: none; margin: 0 0 8px; } .docs-output { } /*************** * Landing Page ***************/ ul.buckets { margin: 24px 0 24px -8px; padding: 0; position: relative; } ul.buckets li { list-style: none; margin: 0; text-align: center; } ul.buckets li md-card md-card-content { padding: 0; } ul.buckets li a { display: block; font-weight: 500; padding: 16px 0; text-decoration: none; -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1); background-color: #f6f6f6 !important; box-shadow: none !important; margin-right: 0; margin-top: 0; } ul.buckets li a, ul.buckets li a md-icon { color: #666 !important; transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1); } ul.buckets li a:hover, ul.buckets li a:focus, ul.buckets li a:hover md-icon, ul.buckets li a:focus md-icon { color: #106CC8 !important; background-color: #ebebeb !important; } /************ * API DOCS ************/ .api-options-bar .md-button { margin: 4px; padding: 4px; } .api-options-bar .md-button:hover, .api-options-bar .md-button:focus { background: rgba(0, 0, 0, 0.2); } .api-options-bar.with-icon md-icon { position: absolute; top: -3px; left: 2px; } .api-options-bar.with-icon .md-button span { margin-left: 22px; } header.api-profile-header > h2 { margin: 0; color: #164371; } .api-params-item { min-height: 72px; } .api-params-label { margin-right: 8px; text-align: center; margin-top: 14px; -webkit-align-self: flex-start; -moz-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .api-params-title { color: #888; } .api-params-content ul { padding-left: 4px; } ul.methods > li { margin: 0 0 48px; } ul.methods .method-function-syntax { font-weight: normal; font-size: 2.0rem; margin: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; } h3 .method-function-syntax { display: block; padding: 0 16px; background: #1C5792; color: white; line-height: 48px; } @media (max-width: 600px) { ul.methods > li { padding-left: 0; border-left: none; list-style: default; } ul.methods .method-function-syntax { font-size: 1.4rem; } } .demo-source-container pre, .demo-source-container code { min-height: 100%; } md-content.demo-source-container { background-color: transparent; border: none; } .demo-container > md-tabs { border-radius: 0; } md-content.demo-source-container > hljs, md-content.demo-source-container > hljs > pre, md-content.demo-source-container > hljs > pre > code.highlight { min-height: 100%; } .dashed-bottom { border-bottom: dashed 1px rgb(224, 224, 224); padding-bottom: 10px; } .dashed-top { border-top: dashed 1px rgb(224, 224, 224); margin-top: 10px; } .api-section, .api-param-section { margin: 3em 0 0; } .api-section h3 { padding-top: 20px; } .responsive-video { height: 0; overflow: hidden; padding-bottom: 75%; position: relative; } .responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ul.no-style { padding: 0; list-style: none; } ul.methods { padding: 0; list-style: none; } ul.methods > li:first-child > *:first-child { padding-top: 0; } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } .version-picker { background: #267ED5 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.12); margin-bottom: 1px !important; } .version-picker .menu-toggle-list { background: transparent !important; } md-icon.block { color: #106CC8; display: block; height: 50px; width: 50px; } .doc-demo-content { padding: 0; } docs-demo .doc-demo-content { margin: 16px; } .site-content-toolbar { background: #f6f6f6 !important; color: #666 !important; z-index: 3; } .site-content-toolbar { background: #f6f6f6 !important; color: #202020 !important; z-index: 3; } .service-desc { overflow: hidden; background: #E3ECF5; padding: 16px; margin: 0 0 8px; } .service-desc > p:first-child { margin-top: 0; } .service-desc > p:last-child { margin-bottom: 0; } /* --------------------- * Demo Workarounds * * Necessary for component demos that append DOM subtrees outside of the demo app. * Because our docs build prepends CSS classes onto custom demo styles provided for developers, * these styles are needed for the docs website. */ .autocomplete-custom-template li { border-bottom: 1px solid #ccc; height: auto; padding-top: 8px; padding-bottom: 8px; white-space: normal; } .autocomplete-custom-template li:last-child { border-bottom-width: 0; } .autocomplete-custom-template .item-title, .autocomplete-custom-template .item-metadata { display: block; line-height: 2; } .autocomplete-custom-template .item-title md-icon { height: 18px; width: 18px; } /* Styles for Windows High Contrast mode */ @media screen and (-ms-high-contrast: active) { a { text-decoration: underline; } iframe, hljs pre { border: 1px solid #fff; } } .no-transition { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; } table.attributes, table.md-api-table { padding-left:15px; margin-bottom: 20px; } table.attributes tr td:first-child { font-weight: bold; background-color: #DBEEF5; } table.attributes tr td:last-child { padding-left: 10px; } table.md-api-table tr td:first-child { font-weight: bold; } .layout_note { font-size: 0.9em; margin: -5px 40px 0px 20px; color: rgb(1, 57, 114); background-color: rgba(156, 204, 101,0.4); padding: 20px; } .contributor_tables { padding-left: 25px; } .contributor_tables > table { padding-top: 10px; padding-bottom: 10px; } /* Provide some layout/padding enhancements for mobile/small devices */ @media(max-width: 500px) { /* Reduce the size of the nav logo/header */ .docs-logo > img { height: 75px; margin-top: 10px; } .docs-logo h1 { font-size: 18px; line-height: 2rem; } /* Reduce the padding around standard doc content */ .docs-ng-view .doc-content { margin: 8px; padding: 0; } /* Reduce the padding around doc demos */ .docs-ng-view docs-demo { padding: 0; } .docs-ng-view docs-demo:first-child { margin-top: 0; } .docs-ng-view docs-demo .doc-demo-content { margin: 0; } }