From d766f776a6baac596c93e4d2658094ce04360465 Mon Sep 17 00:00:00 2001 From: Magdalena Angelova Date: Thu, 7 Apr 2022 11:53:06 +0300 Subject: [PATCH] feat: add dark theme --- _assets/css/_base-variables.scss | 5 +- _assets/css/_dojo-layout.scss | 72 + _assets/css/_styles-layout.scss | 4704 +++++++++++++++++ _assets/css/_styles-save.scss | 4668 ++++++++++++++++ _assets/css/_styles.scss | 4669 +--------------- _assets/css/api.scss | 47 +- _assets/css/dojo.scss | 68 +- _assets/css/thememode/_dojo-themes.scss | 34 + _assets/css/thememode/_mixins.scss | 3 + _assets/css/thememode/_styles-themes.scss | 484 ++ _assets/css/thememode/_variables-dark.scss | 42 + _assets/css/thememode/_variables-light.scss | 33 + .../css/thememode/_variables-template.scss | 32 + _assets/images/arrow-scrollbar-n.svg | 3 + _assets/images/arrow-scrollbar-s.svg | 3 + _assets/images/expand-arrow-e.svg | 3 + _assets/images/expand-arrow-s.svg | 3 + _assets/images/icon-copy-code.svg | 6 + _assets/images/switcher-dark.png | Bin 0 -> 425 bytes _assets/images/switcher-light.png | Bin 0 -> 402 bytes _assets/js/dojo.js | 2 +- _assets/js/main.js | 1 + _assets/js/side-nav.js | 2 +- _assets/js/theme-mode.js | 29 + _includes/_head.html | 3 + {_assets/images => _includes/icons}/edit.svg | 0 _includes/icons/menu.svg | 4 + _includes/search.html | 3 +- _includes/top-nav.html | 1 + _layouts/api-index.html | 33 +- _layouts/default.html | 2 +- _layouts/documentation.html | 38 +- _plugins/api_generator.rb | 1 + knowledge-base.html | 24 - search.html | 3 - 35 files changed, 10199 insertions(+), 4826 deletions(-) create mode 100644 _assets/css/_dojo-layout.scss create mode 100644 _assets/css/_styles-layout.scss create mode 100644 _assets/css/_styles-save.scss create mode 100644 _assets/css/thememode/_dojo-themes.scss create mode 100644 _assets/css/thememode/_mixins.scss create mode 100644 _assets/css/thememode/_styles-themes.scss create mode 100644 _assets/css/thememode/_variables-dark.scss create mode 100644 _assets/css/thememode/_variables-light.scss create mode 100644 _assets/css/thememode/_variables-template.scss create mode 100644 _assets/images/arrow-scrollbar-n.svg create mode 100644 _assets/images/arrow-scrollbar-s.svg create mode 100644 _assets/images/expand-arrow-e.svg create mode 100644 _assets/images/expand-arrow-s.svg create mode 100644 _assets/images/icon-copy-code.svg create mode 100644 _assets/images/switcher-dark.png create mode 100644 _assets/images/switcher-light.png create mode 100644 _assets/js/theme-mode.js rename {_assets/images => _includes/icons}/edit.svg (100%) create mode 100644 _includes/icons/menu.svg diff --git a/_assets/css/_base-variables.scss b/_assets/css/_base-variables.scss index 5a5d31f..1e5b2e9 100644 --- a/_assets/css/_base-variables.scss +++ b/_assets/css/_base-variables.scss @@ -18,9 +18,10 @@ $link-hover-color: #2D2DB2; $link-background-color: #f2f8ff; $navigation-link-color: #696b6e; -$btn-support-color: $text-primary-color; -$btn-support-border: #C8E2F2; +$btn-support-color: #2D6CEC; +$btn-support-border: #2D6CEC; $btn-support-border-hover: #94D7FF; +$btn-support-hover-color: #ffffff; $border-separator-color: #DEDEDE; $border-horizontal-color: #E6E6E6; diff --git a/_assets/css/_dojo-layout.scss b/_assets/css/_dojo-layout.scss new file mode 100644 index 0000000..fa93e6f --- /dev/null +++ b/_assets/css/_dojo-layout.scss @@ -0,0 +1,72 @@ +.action-buttons { + margin-top: 12px; + border: 1px solid #e8ebef; + border-bottom: 0; + background-color: #fefefe; + + .btn { + margin: 0; + padding: .72em 1.5em; + border: 0; + border-radius: 0; + line-height: 1.2em; + outline: none; + background-color: transparent; + color: #333; + border-width: 0; + border-right: 1px solid #e8ebef; + font-size: 14px; + + &:hover { + text-decoration: none; + background-color: #e8ebef; + color: #000; + } + } + + + pre { + margin-top: 0; + } + + .active-button, + .active-button:hover { + background-color: #e8ebef; + color: #333; + } + + .btn-dojo { + float: right; + border-right: 0; + border-left: 1px solid #e8ebef; + + svg { + margin-right: 10px; + } + + path { + fill: currentColor; + } + } +} + +.CodeMirror { + clear: both; + border: 1px solid #ebecee; + height: auto !important; + font-family: "Metric Mono", "Ubuntu Mono", "Consolas", "Monaco", monospace; + + pre { + font-family: "Metric Mono", "Ubuntu Mono", "Consolas", "Monaco", monospace !important; + } +} + +.CodeMirror-code { + line-height: 18px; + font-size: 13px; +} + +.snippet-runner { + width: 100%; + min-height: 450px; + box-sizing: border-box; +} diff --git a/_assets/css/_styles-layout.scss b/_assets/css/_styles-layout.scss new file mode 100644 index 0000000..b2b00b8 --- /dev/null +++ b/_assets/css/_styles-layout.scss @@ -0,0 +1,4704 @@ +html, +body { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-font-feature-settings: "liga","kern"; + font-feature-settings: "liga","kern"; + -moz-osx-font-smoothing: grayscale; +} + +body, +article, +blockquote, +#results > div, +.side-nav, +.components { + font-size: 14px; + line-height: 1.2em; +} + +html { + height: 100%; +} + +body { + min-height: 100%; + height: 100%; + position: relative; + font-family: $font-regular; + background-color: transparent; + color: $text-default-color; + transition: padding-top .1s; + padding-top: 95px; // navbar-fixed-top height + 20px margin + + &.scroll { + padding-top: 70px; + } + + &.scroll-page, + &.scroll-small-page { + height: auto !important; + } +} + +label { + font-weight: normal; + margin-bottom: 0; +} + +.img-responsive, +.img-responsive img { + -webkit-user-drag: none; + -moz-user-select: none; + user-drag: none; +} + +image { + width: auto; + height: auto; + max-width: 100%; +} + +div.caption { + color: #000000; + font-weight: 500; + font-size: 18px; + letter-spacing: -0.02em; + line-height: 1.222em; +} + +/* Sticky Footer Styles */ + +div#content { + min-height: 100%; + height: auto !important; + height: 100%; + margin: 0 auto -340px; + padding-top: 88px; + position: relative; + overflow: hidden; +} + +#push, +div#footer { + min-height: 340px; +} + +div#footer { + color: #000; + border-width: 1px; + border-style: solid; + border-color: transparent; + background-color: $footer-bg; + font-size: 11px; + line-height: 1.3em; + bottom: 0; + left: 0; + right: 0; + position: relative; + + h1, h2, h3, h4, h5, h6 { + color: #616161; + } + + h6 { + font-size: 14px; + font-family: $font-medium; + letter-spacing: 0.02rem; + text-transform: uppercase; + } + + ul { + font-size: 15px; + line-height: 22px; + } + + a { + color: #000; + transition: color .2s; + + &:hover, + &:focus { + opacity: 0.7; + } + } + + p { + color: #4f5d6c; + } + + .environment-develop & { + background-color: $env-develop-bg; + + h1, h2, h3, h4, h5, h6, + a:hover, + a:focus { + color: #ffd0a6; + } + } +} + +.copyright { + position: relative; + margin-top: 40px; + text-align: center; +} + +.social-icons { + padding-bottom: 50px; + + @media screen and (max-width: 1820px){ + padding-bottom: 30px; + } + + @media screen and (max-width: 768px){ + padding-bottom: 10px; + } +} + +#footer { + .social-icon { + text-align: center; + height: 30px; + line-height: 26px; + margin: 0; + padding: 0 15px; + text-align: center; + transition: opacity .2s; + + &:last-child { + padding-right: 0; + } + } + + .progress-logo { + p { + margin-top:10px; + } + } + + .legal-links-container{ + text-align: right; + + @media screen and (max-width: 768px){ + text-align: center; + } + + .legal-links { + padding:0; + + li { + list-style-type: none; + display: inline-block; + font-weight: 500; + font-size: 12px; + + &:not(:first-child) { + padding-left: 3px; + border-left: 1px solid #ccc; + } + } + } + + .dnsmpi { + border: 2px solid rgba(148, 216, 255, 0.533); + padding: 8px 16px; + + &:hover { + text-decoration: none; + opacity: 1; + border-color: rgb(148, 216, 255) + } + } + } +} + +.social-icon { + &:hover { + opacity: 0.5; + } + + svg { + width: 24px; + height: 24px; + vertical-align: middle; + } + + path { + fill: #1f1f1f; + } +} + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + color: $text-headings-color; + font-family: $font-heading; +} + +h1, .h1 { + font-size: 60px; + font-weight: $fw-semibold; + line-height: 54px; + word-break: break-word; +} + +h2, .h2 { + font-size: 45px; + font-weight: $fw-semibold; + line-height: 44px; +} + +h3, .h3 { + font-size: 35px; + font-weight: $fw-normal; + line-height: 34px; +} + +h4, .h4 { + font-size: 23px; + font-weight: $fw-bold; + line-height: 27px; +} + +h5, .h5 { + font-size: 13px; + line-height: 1.231em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +p.lead { + font-size: 20px; + font-family: $font-regular; + line-height: 1.3; + color: #4f5d6c; + margin-bottom: 0; +} + +.sticky { + display: inline-block; +} + +a { + color: $link-color; /*0277bd*/ +} + +a:link, +a:hover, +a:focus, +a:active { + text-decoration: none; + outline: none; +} + +a:hover, +a:focus, +a:active { + color: $link-hover-color; +} + +b, +strong { + font-weight: 500; +} + +.clearfix:after { + display: block; + clear: both; + content: ""; + height: 0; + line-height: 0; +} + +.list-unstyled { + line-height: 30px; +} + +.release-date { /* Release date style in version heading h2 */ + font-size: .6em; + color: #4f5d6c; +} + +/* NavBar */ + +.navbar-fixed-top .navbar-collapse, +.navbar-fixed-bottom .navbar-collapse { + max-height: 360px; +} + +.navbar { + min-height: 34px; + line-height: 0; + margin-bottom: 0; + border-bottom: 0; + transition: top .1s, background-color .1s; + + .no-js &, + .scroll & { + background-color: #fff; + box-shadow: 0 0 12px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05); + } + + /* Hamburger Button Styles */ + .navbar-toggle { + width: 50px; + height: 50px; + padding: 0; + margin: 0; + background-color: transparent; + background-image: none; + border: 0; + border-radius: 0; + + &:hover, + &:focus { + background-color: #353c43; + } + + .icon-bar { + margin-left: auto; + margin-right: auto; + } + } +} + +.navbar-nav { + margin: 0 -15px; +} + +.navbar-collapse { + width: 100%; + padding-left: 0; + padding-right: 0; +} + +// Hat menu +nav.TK-Nav, .PRGS-PairNav { + width: 100%; + margin-top: -95px; +} + +// Ribbon Announcement + +#announcement-banner { + width: 100%; + position: fixed; + z-index: 40000; + left: 0; + top: 61px; + + .close-button-container { + position: absolute; + top: 19px; + right: 16px; + z-index: 100000; + + &:hover { + cursor: pointer; + } + } +} + + +@media screen and (max-width: 1240px){ + #announcement-banner { + top: 45px; + + #announcement-content > * { + padding-right: 40px; + } + } +} + +/* Main Menu */ + +$text-color: #4a4e52; +$hover-text: darken($text-color, 10%); + +#navbar { + $line-height: 35px; + $selection-size: 3px; + + display: flex; + align-items: center; + width: 100%; + padding: 20px; + position: fixed; + top: 60px; + background-color: rgba(219,219,219,.4); + backdrop-filter: blur(45px); + justify-content: center; + align-items: center; + transition: padding-top .1s; + z-index: 1100; + + a { + font-size: 15px; + padding: 1px 10px 0; + transition: line-height .1s; + line-height: $line-height; + color: $text-color; + text-transform: uppercase; + font-weight: 500; + font-family: $font-heading; + letter-spacing: 0; + background-color: transparent; + + &::after { + content: ""; + height: $selection-size; + display: block; + background-color: transparent; + transition: background-color .3s; + } + } + + a:hover::after, + a:focus::after, + a:active::after, + .active a::after { + background-color: $accent; + } + + li { + position: static; + } + + select { + position: absolute; + top: 54px; + transition: top .1s; + right: 15px; + max-width: 45%; + padding: 3px 10px 4px; + border: 1px solid #f1f1f1; + background: #ffffff; + box-shadow: 0 1px 1px 0 transparent; + font-family: inherit; + font-size: inherit; + outline: none; + + .scroll & { + top: 5px; + max-width: 30%; + } + } + + .main-menu { + display: none; + } + + .all-components { + display: flex; + align-items: center; + + svg { + fill: currentColor; + } + } + + .search-icon { + height: $line-height + $selection-size; + cursor: pointer; + + path { + fill: $text-color; + transition: fill .2s; + } + + &::after { + visibility: hidden; + } + + &:hover path, + &:active path, + &:focus path { + fill: $accent; + } + } + + .switch-btn { + width: 32px; + height: 32px; + border-width: 2px; + border-style: solid; + border-color: #fff; //remove after creating variables for the light theme + border-radius: 100vh; + background-color: #fff; //remove after creating variables for the light theme + background-repeat: no-repeat; + box-shadow: 0px 0px 24px rgba(90,94, 102, 0.4); + display: flex; + flex-shrink: 0; + justify-content: center; + align-items: center; + top: 10px; + right: 20px; + cursor: pointer; + + .switch-icon { + display: inline-block; + width: 16px; + height: 16px; + background: url(image_path("switcher-light.png")) no-repeat 50% 50%; //remove after creating variables for the light theme + } + } + + .nav-button a { + background-color: $accent-solid; + + &:hover, + &:active { + background-color: darken($accent-solid, 10%); + } + } + + .primary-cta a { + background-color: $try-now; + + &:hover, + &:active { + background-color: $try-now-hover; + } + } + + .primary-cta a, .nav-button a { + color: #fff; + padding: 2px 20px 2px; + margin-left: 12px; + + &::after { + display: none; + } + } +} + +// hide primary cta on homepage until scrolled +.brand-homepage { + .navbar { + position: absolute; + box-shadow: none; + } + + .global-search { + right: 0; + } + + .primary-cta, .nav-button { + display: none; + } + + // duplicate styles with sticky navbar positioning + &.scroll-page { + .navbar { + position: fixed; + box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); + } + + .global-search { + right: 90px; + } + + .primary-cta, .nav-button { + display: block; + } + } +} + +/* Main Wrapper */ + +.overview { + padding-top: 50px; +} + +/* Getting started styles */ + +.brand-getting-started { + .call-to-action { + background-color: $accent; + color: #fff; + padding: 15px 24px; + margin-right: 2em; + display: inline-block; + text-transform: uppercase; + + &:hover, + &:active { + background-color: darken($accent, 10%); + color: #fff; + } + } + + #content article { + .call-to-action-info { + color: #4f5d6c; + width: 65%; + margin-bottom: 60px; + } + + hr { + margin: 50px 0; + } + } +} + +/* Breadcrumbs */ + +.breadcrumbs { + color: #95a3b1; + font-size: 16px; +} + +/* Version Picker */ + +#version { + background: transparent; + border: 0; + font-size: inherit; + color: $link-color; + font-family: $font-medium; + outline: none; + + &:hover { + color: $accent; + } + + option { + color: #000; + } +} + +/* Side-Nav Styles */ +$nav-icon-color: #979797; + +#page-tree, +#page-tree-api { + padding: 0; + white-space: normal; + word-break: break-word; + overflow: hidden; + font-family: "Metric", Helvetica, Arial, sans-serif; + outline: none; +} + +.side-nav { + padding-top: 25px; + padding-left: 0; + padding-right: 0; + margin-top: 90px; + top: 0; + left: 0; + overflow: auto; + position: fixed; + display: none; + color: $text-active-color; + border-right: 1px solid #ececec; + z-index: 1070; + + #page-tree, + #page-tree-api { + .k-item { + padding-left: 0; + } + + ul:focus { + outline: none; + } + + ul li ul li { + span { + font-size: 16px; + line-height: 20px; + } + + ul li { + span { + font-size: 15px; + } + } + } + } + + .k-treeview .k-in { + border: 0; + line-height: 1.2em; + padding-right: 0; + } + + .k-in { + cursor: pointer; + display: block; + padding-left: 30px; + padding-top: 8px; + padding-bottom: 8px; + text-decoration: none; + } + + .k-state-hover { + background-color: $link-background-color; + } + + .k-state-selected { + color: $side-nav-link-color; + + a { + color: $side-nav-link-color; + font-weight: $side-nav-selected-fw; + + &:hover { + background-color: $link-background-color; + } + + &:active { + background-color: transparent; + color: $side-nav-link-color; + } + } + } + + .k-icon, .article { + position: relative; + margin: 0; + padding: 0; + } + + .article { + position: absolute; + left: 20px; + top: 5px; + border-width: 1px; + border-style: solid; + border-color: transparent; + } + + .k-icon:before { + content: ""; + display: none; + } + + .k-treeview > .k-group > .k-item, + #page-tree-api > .k-group > .k-item { + > .k-last { + border-bottom: 1px solid $border-separator-color; + } + + div { + position: relative; + + > .k-icon { + position: absolute; + width: 36px; + height: 16px; + top: 25%; + + &.k-i-expand { + background: url(image_path("group-expand-collapse.svg")) no-repeat 50% 50%; + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + color: $nav-icon-color; + } + + &.k-i-collapse { + background: url(image_path("group-expand-collapse.svg")) no-repeat 50% 50%; + } + } + } + + // Side navigation root items + > div { + border-bottom: 1px solid $border-separator-color; + + > .k-icon { + display: none; + } + + .k-in, span > a { + text-transform: uppercase; + transition: background-color .1s, padding .1s, font-weight .1s; + font-weight: $fw-semibold; + font-size: 16px; + font-family: $font-regular; + line-height: 28px; + } + + .k-icon { + top: 25%; + left: auto; + } + + .k-in .article { + right: 15px; + top: 50%; + left: auto; + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + display: none; + } + } + } + + .k-group .k-group { + .k-item { + .k-icon { + &.k-i-collapse, + &.k-i-expand { + top: 11px !important; + width: 16px !important; + height: 14px !important; + opacity: 0.6; + position: absolute; + } + } + } + + .k-in { + padding-left: 48px; + + a { + padding-left: 48px; + margin-left: -48px; + padding-top: 6px; + margin-top: -6px; + padding-bottom: 6px; + margin-bottom: -6px; + } + } + + .k-icon, .article { + left: 28px; + } + + .k-group { + .k-in { + padding-left: 66px; + font-weight: 400; + + a { + padding-left: 66px; + margin-left: -66px; + } + } + + .k-icon, .article { + left: 46px; + } + + .k-group { + .k-in { + padding-left: 84px; + + a { + padding-left: 84px; + margin-left: -84px; + } + } + + .k-icon, .article { + left: 64px; + } + + .k-group { + .k-in { + padding-left: 102px; + + a { + padding-left: 102px; + margin-left: -102px; + } + } + + .k-icon, .article { + left: 82px; + } + + .k-group { + .k-in { + padding-left: 120px; + + a { + padding-left: 120px; + margin-left: -120px; + } + } + + .k-icon, .article { + left: 100px; + } + } + } + } + } + } + + .side-title { + padding-left: 30px; + padding-bottom: 10px; + } + + &.show-components { + display: block; + padding-bottom: 15px; + background-color: #fff; + border-bottom: 1px solid #e4e4e4; + border-left-width: 0; + border-right-width: 0; + z-index: 1100; + width: 100%; + + .side-title { + padding-left: 15px; + } + + > ul > li > ul > li > ul > li a { /* Exapnded link in Level 3 / Title of Level 4 */ + padding-left: 25px; + } + + > ul > li > ul > li > ul > li > ul > li a { + padding-left: 45px; + } + } + + ul { + list-style: none; + margin: 0; + padding: 0; + font-family: $font-medium; + } + + a { + display: block; + position: relative; + line-height: 1em; + text-decoration: none; + transition: background-color .2s; + overflow: hidden; + text-overflow: ellipsis; + color: $navigation-link-color; + } + + a.active { + color: $accent !important; + font-family: $font-medium; + } + + > ul > li > a { + font-weight: 500; + line-height: 1.2em; + } + + > ul > li.expanded { + background: #fafafa; + margin: 10px 0; + } + + > ul > li > ul { /* Level 2 */ + padding: 0 0 10px 0; + font-size: 14px; + font-family: $font-regular; + } + + > ul > li > ul > li a { + padding-top: 7px; + padding-bottom: 7px; + color: $link-color; + } + + /* Level 3 */ + + > ul > li > ul > li > ul { + font-size: 14px; + font-family: $font-light; + } + + > ul > li > ul > li > ul > li a { + padding-left: 40px; + padding-top: 5px; + padding-bottom: 5px; + } + + > ul > li > ul > li > ul > li.expanded > a { /* Exapnded link in Level 3 / Title of Level 4 */ + padding-left: 40px; + } + + /* Level 4 */ + + > ul > li > ul > li > ul > li > ul { + font-size: 13px; + font-family: $font-light; + } + + > ul > li > ul > li > ul > li > ul > li a { + padding-left: 60px; + } +} + +.content-wrapper { + padding-top: 50px; +} + +.side-title { + text-transform: uppercase; +} + +/* Article Styles */ + +article { + font-size: 20px; + line-height: 26px; + position: relative; + + b, + strong { + font-weight: 600; + } + + h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; + max-width: 1200px; + + a { + cursor: pointer; + color: $text-primary-color; + } + } + + h1, .h1 { + margin-top: 40px; + margin-bottom: 40px; + } + + h2, .h2 { + margin-top: 40px; + margin-bottom: 24px; + } + + h3, .h3 { + margin-top: 40px; + margin-bottom: 8px; + } + + &.api-reference .editor h3 { + margin: 0; + font-size: 22px; + line-height: 1em; + font-weight: 400; + letter-spacing: -0.02em; + } + + h4, .h4 { + margin-top: 24px; + margin-bottom: 8px; + } + + h5, .h5 { + margin-top: 24px; + margin-bottom: 8px; + } + + p { + max-width: 1200px; + font-size: 20px; + line-height: 26px; + margin-top: 8px; + margin-bottom: 8px; + + a:hover, + a:focus { + text-decoration: none; + } + + &.run-code { + margin-top: -5px; + margin-bottom: 40px; + } + } + + li { + font-size: 20px; + } + + &:not(.api-reference) > p:first-child, + &:not(.api-reference) h1 + p { + font-size: 22px; + line-height: 26px; + font-weight: $fw-normal; + font-family: $font-regular; + margin-top: 16px; + margin-bottom: 16px; + } + + h3 + p, + .h3 + p, + h4 + p, + .h4 + p { + margin-top: 0; + } + + ul, ol { + max-width: 1200px; + margin: 8px 22px; + padding: 0 0 0 12px; + + &.k-tabstrip-items{ + margin: 1em 0; + } + + li { + margin-bottom: 3px; + position: relative; + } + + img { + margin: 0; + } + } + + &.api-reference ul, + ul.docs-tabstrip, + ul.k-reset, + ul.k-pager-numbers { + list-style: none; + } + + ul.list-unstyled li { + padding: 0; + + &:before { + content: none; + } + } + + img { + margin: 30px 0; + width: auto; + height: auto; + max-width: 100%; + } + + /* Article Table Styles */ + table { + width: 100%; + table-layout: fixed; + margin: 15px 0 20px; + word-break: break-word; + overflow-wrap: break-word; + + th { + color: #8a959f; + background-color: #fcfcfc; + border-bottom: 1px solid #e4e4e4; + font-size: 13px; + font-weight: normal; + text-transform: uppercase; + } + + th, + td { + padding: 5px 10px; + } + + tr:nth-child(odd) { + background-color: #fcfcfc; + } + } + + h4 { + em { + color: #8a959f; + font-style: normal; + padding: 0 5px; + } + + code { + font-size: 16px; + padding: 2px 5px 3px; + } + + &.example-title { + margin-top: 25px; + margin-bottom: 10px; + padding: 0; + text-transform: uppercase; + color: #000000; + font-size: 15px; + line-height: 1em; + letter-spacing: 0.02em; + font-weight: 500; + font-family: $font-heading; + } + } +} + +ul.mdash { + list-style: none; + + li { + padding-left: .3em; + position: relative; + + &:before { + content: ""; + position: absolute; + top: .7em; + left: -20px; + width: 14px; + height: 1px; + background-color: currentColor; + } + } +} + +blockquote { + border: 0; + margin: 20px 0; + min-height: 70px; + padding: 24px 80px; + color: #fff; + border-width: 2px; + border-style: solid; + border-color: transparent; + background-color: $important-bg; + background-image: url(image_path("important-icon.svg")); + background-repeat: no-repeat; + background-size: 48px; + background-position: center; + background-position-x: 16px; + background-position-y: 50%; + + &:not(.alert-note) a, + &:not(.alert-note) a:link { + color: #000000; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + color: #000000; + text-decoration: none !important; + } + } + + color: #000000; + + p:first-child, + ul:first-child, + ol:first-child { + margin-top: 0; + } + + p:last-child, + ul:last-child, + ol:last-child { + margin-bottom: 0; + } + + &.disclaimer { + background-color: #eaebec; + color: #4f5d6c; + + p:first-child { + color: #36393f; + } + } + + &.alert-note { + margin-top: 2em; + margin-bottom: 2em; + background-color: #eaebec; + color: #4f5d6c; + } + + &.important { + background-color: $important-bg; + background-image: url(image_path("important-icon.svg")); + } + + &.caution, + &.warning { + background-color: $caution-bg; + background-image: url(image_path("caution-icon.svg")); + } + + &.tip, + &.note { + background-color: $tip-bg; + background-image: url(image_path("tip-icon.svg")); + } +} + +/* Article TOC & Related Articles */ +$border-color: #d9d9d9; + +#stick-marker { + margin-top: 6px; +} + +.additional-content-column { + position: absolute; + right: 0; + top: 100px; + margin-right: 40px; + + .btn-action { + color: $btn-action-foreground; + background-color: $btn-action-background; + text-transform: uppercase; + padding: 10px 20px; + margin: 10px 0; + border: 1px solid $accent; + border-radius: 0; + font-size: 14px; + font-weight: 500; + + &:hover, + &:focus, + &:active { + color: $btn-action-active-color; + background-color: $btn-action-active; + } + } + + .btn-contact-support { + color: $btn-support-color; + background-color: $btn-support-bg; + border: 2px solid $btn-support-border; + border-radius: 30px; + padding: 5px 10px; + font-size: 16px; + margin: 10px 0; + display: block; + text-align: center; + + &:hover, + &:focus, + &:active { + color: $btn-support-hover-color; + background-color: $btn-support-border; + } + } + + .btn-edit-article { + font-size: 16px; + position: relative; + display: flex; + align-items: center; + + svg { + width: 16px; + fill: currentColor; + margin-right: 5px; + } + } + + .support-info-area { + margin-bottom: 50px; + } + + .additional-info-content { + padding-top: 10px; + font-size: 17px; + font-weight: 500; + color: $text-active-color; + } + + &.affix { + margin-top: 85px; + position: fixed; + top: 75px; + z-index: 1015; + } + + &.empty { + display: none !important; + } +} + +.related-articles { + > ul > li > a { + font-weight: 500; + } +} + +.uppercase-clear { + text-transform: none !important; +} + +.article-toc, .related-articles, .feedback-ab { + font-size: 14px; + margin-bottom: 30px; + padding-left: 10px; + border-left: 1px solid $border-separator-color; + + .side-title { + padding-top: 10px; + font-size: 17px; + font-weight: 500; + color: $text-active-color; + } + + .layout-components &.affix-top { + position: relative; + top: 160px; + } + + &.empty { + display: none !important; + } + + ul { + margin: 10px 0 10px -15px; + + a { + display: block; + margin: 14px 0 5px; + border-left: 5px solid transparent; + line-height: 1em; + padding: 2px 0 2px 14px; + text-decoration: none; + transition: color .1s, border-color .1s; + color: $navigation-link-color; + + &:hover, + &:active, + &:focus { + background-color: transparent; + color: $accent; + } + } + } + + .anchor-h1, + .anchor-h2 { + font-family: $font-medium; + font-size: 14px; + } + + .anchor-h3 { + margin: 5px 0; + font-family: $font-light; + font-size: 14px; + padding-left: 30px; + } + + hr { + width: 25px; + margin-left: 0; + border-top-color: $border-color; + } + + .active a { + color: $text-active-color; + border-color: $accent; + font-weight: 500; + } + + a:active { + color: #36393f; + } +} + +.article-cta { + background-color: #ee5247; + background-image: linear-gradient(to left, rgba(238, 150, 111, 0), rgba(238, 150, 111, 0.5)), url(image_path("big-brand.png")); + background-position: 50% 50%; + color: #fff; + margin: 70px -90px -60px; + padding: 0 75px 60px; // 90 - gutter/2 + position: relative; + z-index: 2; + + h2 { + color: inherit; + + a:hover, + a:focus, + a:active { + color: #fff; + + &:after { + display: none; + } + } + } + + p:first-child { + margin-top: 0; + } + + .btn-cta { + color: inherit; + text-transform: uppercase; + border: 2px solid currentColor; + border-radius: 0; + + &:hover, + &:focus, + &:active { + color: #f1f1f1; + } + } +} + +.article-cta-bg { + background-color: $footer-bg; + display: block; + z-index: 1; + position: absolute; + left: -100vw; + bottom: 0; + width: 200vw; + height: 175px; +} + +/* Search Results */ + +#search-container { + .results-message { + border: none; + } + + .k-pager-numbers-wrap select.k-dropdown { + display: none; + } + + .k-pager-wrap { + background-color: transparent; + justify-content: space-between; + + .k-pager-info { + display: none; + } + } + + .k-pager-numbers-wrap { + display: inline-block; + } + + .k-pager-nav:nth-child(4) { + float: right; + } +} + +#results { + border-top: 1px solid #e4e4e4; + border-left: none; + border-right: none; + border-bottom: none; + + > div { + padding: 20px 0 0; + line-height: 1.3em; + } + + h2 { + margin-top: 0; + margin-bottom: 2px; + font-size: 24px; + font-weight: 400; + color: #2489d8 !important; + } + + p { + margin: 0; + font-size: 13px; + color: #7d8a98; + + a { + font-size: 13px; + } + } +} + +.go-back { + svg { + width: 12px; + height: 12px; + } + + path { + fill: $link-color; + } + + &:hover path { + fill: $link-hover-color; + } +} + +/* Pager Styles */ + +.site-pager { + text-align: center; + font-size: 15px; + border: none; + + .k-pager-nav.k-pager-first, + .k-pager-nav.k-pager-last { + display: none; + } + + .k-pager-numbers { + display: inline-block; + margin: 0; + padding: 0; + list-style: none; + } + + .k-pager-numbers li { + display: inline-block; + padding: 0; + } + + .k-pager-numbers li a, + .k-pager-numbers li span, + a.k-pager-nav { + display: block; + min-width: 20px; + height: 50px; + line-height: 50px; + margin-top: 10px; + margin-bottom: 10px; + padding-left: 20px; + padding-right: 20px; + vertical-align: middle; + color: #a2a2a4; + outline: none; + border: 1px solid transparent; + border-radius: 0; + } + + .k-pager-numbers li a:hover, + .k-pager-numbers li a:focus { + background-color: #eaebec; + color: #36393f; + } + + .k-pager-numbers li .k-state-selected { + border-color: #cacacb; + color: #36393f; + } + + li.k-current-page { + display: none; + } + + a.k-pager-nav { + padding-left: 10px; + padding-right: 10px; + border-color: #cacacb; + color: #36393f; + font-family: $font-regular; + border-radius: 0; + border: 0; + + &.k-state-disabled { + visibility: hidden; + } + + &:hover, + &:focus { + background-color: #eaebec; + color: #36393f; + } + } +} + +article table tr { + background-color: #f8f8f8; +} + +/* Search Popup */ + +#refine-search-popup { + font-size: 11px !important; + color: black; + border: none; + box-shadow: 3px 3px 19px rgba(0, 0, 0, 0.1); + min-width: 200px; + + ul { + margin: 0; + padding: 0; + border-width: 1px; + border-style: solid; + border-color: transparent; + background: #FFFFFF; + } + + li { + list-style: none; + + &:hover { + background-color: #f3f3f3; + } + + label { + padding: 15px; + cursor: pointer; + font-size: 12px; + } + + .k-icon { + color: $accent-solid; + } + } +} + +.custom-checkbox { + text-transform: uppercase; + display: block; + + input[type="checkbox"] { + display: none; + + &:checked ~ span.k-icon { + opacity: 1; + } + } + + span.k-icon { + opacity: 0; + } + + .k-icon { + margin-right: 8px; + font-size: 13px; + } +} + +#refine-search-container { + white-space: nowrap; + position: absolute; + top: 0; + right: 0; + height: 50px; +} + +#refine-search-button { + text-transform: uppercase; + color: black; + cursor: pointer; + padding: 7px; + line-height: 36px; + + .k-icon { + margin-left: 10px; + margin-right: 10px; + vertical-align: middle; + } +} + +#refine-search-label { + font-size: 13px; + vertical-align: middle; +} + +.unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#page-search { + margin: 0; + width: 100%; + background-color: transparent; + padding: 0; + right: 435px; + text-align: right; + max-width: 930px; + + > div { + text-align: left; + display: inline-block; + width: 100%; + } + + form { + margin-bottom: 0; + box-shadow: 3px 3px 19px rgba(0, 0, 0, 0.1); + } + + table { + margin: 0; + padding: 0; + border: none; + + td { + border: none; + } + } + + input { + width: 100%; + height: 39px; + padding-left: 40px; + padding-right: 15px; + border: 0; + font-size: 19px; + font-family: $font-light; + outline: none; + background-image: url(image_path("search.svg")); + background-repeat: no-repeat; + background-position: 10px 50%; + background-size: 16px; + background-color: transparent; + } + + &.search-visibility { + display: block; + } +} + +#search-container { + input { + width: 100%; + height: 50px; + padding-left: 45px; + padding-right: 15px; + border: 1px solid #fff; + font-size: 19px; + font-family: $font-light; + outline: none; + color: #36393f; + background: url(image_path("search.svg")) #fff no-repeat 10px 50%; + transition: border-color .2s, box-shadow .2s; + } +} + +.toggle-nav, +.show-search { + display: none; + cursor: pointer; +} + +.nav.nav-visibility { + display: block; +} + +.k-tabstrip { + border: 1px solid #ccc; + outline: none; + + .k-link { + padding: 0; + } + + .k-content, + .k-loading { + border: 0; + } + + .k-tabstrip-items { + padding: 0; + border-bottom: 1px solid; + } + + .k-item { + border-width: 0 1px 0 0; + border-style: solid; + font-weight: bold; + font-size: 14px; + padding: .72em 1.5em; + cursor: pointer; + transition-property: background-color, color; + transition-duration: 0.2s; + transition-timing-function: ease; + } + + .k-content pre { + border: 0; + padding: 0; + margin: 1em 0; + } +} + +.toc-prev-next { + float: right; + + a { + display: inline-block; + color: #898c92; + margin: -2px 0; + padding: 2px 15px 2px 10px; + font-size: 10px; + letter-spacing: 0.04em; + text-transform: uppercase; + font-family: $font-medium; + box-shadow: none; + } + + .read-next { + border-left: 1px solid #353c43; + padding: 2px 5px 2px 15px; + } + + svg { + width: 13px; + height: 13px; + vertical-align: middle; + margin: -1px 3px 0; + } + + path { + fill: #fff; + } +} + +.title-prev, .title-next { + display: none; + transition: display .2s; +} + +/* Feedback Styles */ + +@media screen and (min-width: 768px){ + + .feedback-more-info.show { + flex: 0 0 79.1667%; + max-width: 79.1667%; + margin-left: 20.8333%; + padding-left: 16px + } +} + +@media screen and (min-width: 576px){ + .feedback-more-info.show { + flex: 0 0 100%; + max-width: 100%; + margin-left: 0%; + } +} + +.feedback-more-info { + width: 100%; + flex: 0 0 100%; + max-width: 100%; + margin-left: 0%; + max-height: 0; + overflow: hidden; + padding-left: 35px; + padding-right: 16px; + + &.show { + display: block; + transition: max-height 0.2s ease-out; + max-height: 240px; + padding-bottom: 10px; + } + + &.hide { + max-height: 50px; + overflow: hidden; + transition: max-height 0.2s ease-out; + } + + .feedback-other-text-input { + color: #000000; + font-size: 16px; + font-weight: 400; + margin: 10px 0; + padding: 10px; + width: 100%; + max-width: 100%; + min-width: 100%; + height: 120px; + + &:focus { + outline: none; + } + } + + .feedback-skip-button { + display: inline-block; + border-radius: 2px; + text-align: center; + cursor: pointer; + text-decoration: none; + border-width: 2px; + border-style: solid; + transition: color .2s ease, background-color .2s ease, border-color .2s ease; + padding: 5px 24px; + font-weight: 400; + font-size: 19px; + line-height: 32px; + margin-left: 15px; + text-transform: none; + background-color: transparent; + border-color: #C1E8FF; + color: #000; + + &:hover { + cursor: pointer; + border-color: #94D7FF; + } + } + + .feedback-ab-submit-button { + padding: 6px 12px; + margin: 0; + background-color: $accent; + border: 1px solid #FFFFFF; + color: #FFFFFF; + font-size: 14px; + font-weight: 400; + text-transform: none; + + &:hover, + &:active, + &:focus { + background-color: rgba(255, 255, 255, 0.2); + } + } +} + +.feedback-row { + background-image: url(image_path("feedback-bgr.svg")); + background-size: cover; + background-repeat: repeat-x; + font-size: 19px; + font-weight: 500; + z-index: 1100; + + .feedback-question>div{ + display: flex; + padding: 10px 0px; + align-items: center; + flex-wrap: nowrap; + justify-content: center; + } + + @media screen and (max-width: 768px) + { + .feedback-question>div { + flex-wrap: nowrap; + justify-content: space-between; + } + } + + .feedback-button { + display: inline-block; + border-radius: 2px; + text-align: center; + cursor: pointer; + text-decoration: none; + border-width: 2px; + border-style: solid; + transition: color .2s ease, background-color .2s ease, border-color .2s ease; + } + + .feedback-send-data-button { + display: inline-flex; + align-items: center; + justify-content: center; + outline: none; + cursor: pointer; + user-select: none; + border-radius: 2px; + font-weight: 500; + font-size: 19px; + padding: 9px 14px; + line-height: 12px; + min-width: 60px; + } + + + .feedback-button-secondary { + background-color: #2E64D6; + color: #fff; + border-color: transparent; + } + + .feedback-button-secondary:hover { + background-color: #2456BE; + color: #fff; + } + + .feedback-vote-buttons{ + display: flex; + } + + @media screen and (min-width: 768px){ + .feedback-vote-buttons{ + margin-top: 0px; + } + } + + @media screen and (max-width: 380px){ + .feedback-question > div{ + padding-top: 5px; + padding-bottom: 5px; + } + .feedback-vote-buttons{ + flex-wrap: wrap; + row-gap: 5px; + } + } + + .feedback-vote-button { + display: flex; + align-items: center; + justify-content: center; + outline: none; + cursor: pointer; + user-select: none; + border: 0px; + border-radius: 2px; + font-weight: 500; + color: white; + background-color: rgb(46, 100, 214); + font-size: 19px; + padding: 9px 14px; + line-height: 12px; + min-width: 60px; + + &:hover { + background-color: #2456BE; + color: #fff; + } + } + + .close-button-container { + display: none; + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); + background: none; + outline: none; + border: 0px; + + &:hover { + cursor: pointer; + } + } + + &.vote-disabled { + display: none; + } + + &.vote-hide { + animation-name: hideFeedback; + animation-duration: 0.2s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + } + + @keyframes hideFeedback { + from { + opacity: 1; + } + + to { + opacity: 0; + } + } + + &.feedback-fixed { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + margin: 0; + z-index: 1100; + background-color: #e7ebf5; + + .close-button-container { + display: block; + } + } + + h3 { + font-weight: 500; + font-size: 26px; + line-height: 1; + display: inline-block; + color: rgb(31, 31, 31) !important; + margin-top: 0px; + margin-bottom: 0px; + width: 100%; + text-align: center; + } + + @media screen and (min-width: 768px){ + h3{ + text-align: left; + } + } + + h4 { + color: #1f1f1f !important; + } + + button { + display: inline-block; + text-decoration: none; + text-transform: uppercase; + background: transparent; + border: none; + color: $feedback-button-foreground; + cursor: pointer; + transition-property: background-color, color; + transition-duration: 0.2s; + transition-timing-function: ease; + + &:hover, + &:focus, + &:active, + &:visited { + color: $feedback-foreground; + outline: none; + } + } + + .feedback > div { + line-height: 23px; + } + + .feedback > div.side-title{ + line-height: 50px; + font-size: 26px; + } + + @media screen and (max-width: 384px){ + .feedback > div.side-title { + line-height: 30px; + } + } + + @media screen and (max-width: 768px){ + .feedback > div.side-title { + text-align: center; + } + } +} + +.button-close { + position: absolute; + top: 12px; + right: 12px; + border: 0; + width: 32px; + height: 32px; + background: url(image_path("close.svg")) no-repeat 50% 50%; +} + +.button-close span { + display: none; +} + +.button-close:focus { + outline: none; +} + +/* Prev Next Styles */ + +.prev-next { + margin-left: 0; + margin-right: 0; + border-top: 1px solid #e4e4e4; + + a { + display: block; + margin-left: -15px; + padding-left: 20px; + text-decoration: none; + color: $link-color; /*#6de3c2 $accent*/ + fill: $link-color; + font-size: 21px; + line-height: .9em; + font-family: $font-medium; + } + + a span { + display: block; + margin-top: 5px; + color: #36393f; + font-size: 13px; + line-height: 15px; + font-family: $font-regular; + } + + a:hover, a:focus, a:active, + a:hover span, a:focus span, a:active span { + color: $link-hover-color; + fill: $link-hover-color; + } + + a:hover span, a:focus span, a:active span { + text-decoration: underline; + } + + svg { + width: 16px; + height: 16px; + margin-left: -20px; + vertical-align: baseline; + } + + .next { + float: right; + text-align: right; + } + + .next a { + margin-left: 0; + margin-right: -15px; + padding-left: 0; + padding-right: 20px; + } + + .next svg { + margin-left: 0; + margin-right: -20px; + } +} + +/* Temp styles */ +[data-code-language] { + position: relative; + + &::after { + content: attr(data-code-language); + font-family: $font-regular; + position: absolute; + display: block; + top: 5px; + right: 11px; + height: 31px; + line-height: 31px; + vertical-align: middle; + padding: 0 6px 0 0; + text-align: right; + color: #8a959f; + text-shadow: -2px -2px 0 #fefefe, 2px -2px 0 #fefefe, -2px 2px 0 #fefefe, 2px 2px 0 #fefefe; + font-size: 11px; + letter-spacing: 0.04em; + } +} + +.tab-content { + min-height: 30px; + margin: 15px 0 30px; +} + +.snippet-runner { + width: 100%; + height: 260px; + background-color: #fff; + box-shadow: inset 0 0 0 1px #ececec; + + .pane-preview & { + box-shadow: none; + background-color: transparent; + } +} + +/* List of Components */ + +.components { + border-bottom: 1px solid #e4e4e4; +} + +.components-tabstrip { + & a { + font-size: 14px; + } + + li { + &, &.active { + border: none; + } + + &::after { + content: ''; + display: block; + background-color: $accent; + width: 100%; + transform: scaleX(0.4); + transition: transform .25s ease-in-out; + height: 0; + } + + &:hover::after { + height: 1px; + transform: scaleX(0.4); + } + + &.active::after { + height: 2px; + transform: scaleX(1); + } + } +} + +@keyframes showTab { + from { + opacity: 0.1; + transform: translateX(-2%); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +#r-components, #r-wrappers { + &.tab-pane { + animation: showTab 0.25s ease-in-out 0s; + } +} + +.component-item { + position: relative; + padding-left: 36px; + + .highlights & { + h2 { + font-size: 2.5em; + } + + .component-icon { + top: 9px; + } + } + + h2 { + font-size: 1.6em; + font-weight: 400; + + > a { + display: block; + text-overflow: ellipsis; + overflow: hidden; + } + } + + p { + font-size: 13px; + line-height: 1.3em; + color: #7d8a98; + } + + ul, ol { + margin-bottom: 0; + } + + .list-unstyled { + line-height: 16px; + } + + .list-unstyled li { + padding: 6px 0 2px; + } +} + +.component-icon { + display: block; + position: absolute; + top: 2px; + left: 0; + width: 24px; + height: 24px; + + /*background: url(image_path('icon-placeholder.svg')) no-repeat 0 50%;*/ + + > svg { + width: 24px; + height: auto; + vertical-align: top; + + > path { + fill: $accent; + } + } +} + +/* Homepage styles (live demo) */ + +$callout-bg: #d7dfe3; + +.demo-embed { + h4, + .run-code, + pre { + display: none; + } + + .runner iframe { + background-color: transparent; + box-shadow: none; + } +} + +#demo-info-link { + padding-left: 1.4em; + padding-right: 1.4em; +} + +.live-samples .callout-tabs { + list-style-type: none; + margin: 0; + padding: 0; + position: relative; + + li { + display: inline-block; + border: 1px solid #dedede; + border-width: 1px 0; + margin-top: -1px; + } + + h4 { + text-transform: uppercase; + clear: both; + color: #2f8eb8; + line-height: 2em; + margin: 0; + padding: 0 .5em; + cursor: pointer; + font-size: 18px; + font-family: Roboto,Arial,Helvetica,sans-serif; + font-weight: 400; + + &:hover { + color: #006a88; + } + } + + div { + display: none; + padding: .5em; + font-size: 16px; + margin: 0; + } + + .active { + background-color: $callout-bg; + + h4 { + color: #000; + cursor: default; + } + } +} + +// md size +@media (min-width: 992px) { + .SiteRibbon { + font-size: 20px; + } + + .live-samples .callout-tabs { + &::after { + display: none; + } + + li { + display: block; + position: relative; + padding: 10px 20px; + + // callout + &::before { + position: absolute; + content: ""; + display: block; + width: 0; + height: 0; + border-style: solid; + border-width: 0 0 28px 28px; + border-color: transparent transparent fade-out($callout-bg, 1); + left: 0; + top: 7px; + z-index: 0; + transition: all .1s 0s; + } + + // background + &::after { + position: absolute; + content: ""; + left: 20px; + right: 20px; + top: 20px; + bottom: 20px; + z-index: 0; + background-color: fade-out($callout-bg, 1); + transition: all .2s .1s; + } + } + + h4 { + line-height: 48px; + } + + h4, div { + position: relative; + z-index: 1; + top: 0; + left: 0; + padding: 0; + } + + div { + display: block; + overflow: hidden; + max-height: 0; + transition: max-height 0 .5s; + } + + .active { + background-color: transparent; + + &::before { + left: -28px; + border-color: transparent transparent $callout-bg; + transition: all .5s .2s; + } + + &::after { + background-color: $callout-bg; + left: 0; + right: 0; + top: 0; + bottom: 0; + transition: all .2s 0s; + } + + div { + max-height: 300px; + } + } + } +} + +/* Global Search */ + +.global-search { + width: 100%; + right: 30px; + display: flex; + padding: 0 32px; + justify-content: center; + transition: left .2s; + + &.show-search { + left: -10%; + } + + .scroll & { + top: 8px; + } + + input { + width: 1000px; + height: 48px; + padding-left: 40px; + padding-right: 15px; + border-radius: 2px; + border: 1px solid transparent; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); + font: 300 22px/26px Metric,Arial,sans-serif; + outline: 0; + background-size: 16px; + transition: border-color .2s, box-shadow .2s; + + &:hover { + border: 1px solid #2D2DB2; + font-weight: 400; + color: #000; + transition: border 200ms ease-in; + } + + &:focus { + border: 1px solid #2D2DB2; + font-weight: 400; + color: #000; + transition: border 200ms ease-in; + } + } + + #refine-search-container { + height: 39px; + } + + #refine-search-button { + line-height: 30px; + font-size: 16px; + } +} + + + +.search-input-container { + display: flex; + position: relative; + align-items: center; + + svg { + position: absolute; + left: 15px; + } +} + +.local-search { + input { + width: 100%; + height: 50px; + padding-left: 45px; + padding-right: 15px; + border: 1px solid #fff; + font-size: 19px; + font-family: $font-light; + outline: none; + color: #36393f; + background: url(image_path("search.svg")) #fff no-repeat 10px 50%; + transition: border-color .2s, box-shadow .2s; + box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.05); + + &:hover { + box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.1); + } + + &:focus { + border-color: #d9d9d9; + } + } +} + +.button { + display: inline-block; + min-width: 120px; + height: 50px; + line-height: 48px; + padding-left: 20px; + padding-right: 20px; + color: #fff; + background-color: #0081a6; + vertical-align: middle; + text-align: center; + font-size: 15px; + font-family: $font-heading; + border: 1px solid transparent; + outline: none; + transition: background-color 0.2s; + + &.small { + min-width: 40px; + height: 36px; + line-height: 34px; + padding-left: 20px; + padding-right: 20px; + } + + &:hover, + &:focus, + &:active { + color: #fff; + background-color: $link-hover-color; + text-decoration: none; + } + + &.ghost { + font-size: 16px; + color: #36393f; + background-color: transparent; + border-color: #cacacb; + + &:hover, + &:focus { + color: #36393f; + background-color: #eaebec; + } + } + + &.secondary { + color: #324359; + background-color: #afe0f4; + text-transform: uppercase; + font-weight: 500; + letter-spacing: 1px; + + &:hover, + &:focus { + background-color: #8ed7f5; + } + } + + article & { + min-width: 60px; + height: 36px; + line-height: 33px; + padding-left: 15px; + padding-right: 15px; + } +} + +.all-components { + display: block; + cursor: pointer; + + svg { + fill: currentColor; + } + + &:active, + &:hover, + &:focus { + background-color: #eaebec; + color: #333; + } + + &::after { + content: " "; + background-color: transparent !important; + } + + .scroll & { + box-shadow: none; + margin-right: 0; + } +} + +span.all-components-expanded-icon { + position: absolute; + top: 10px; + left: 80px; + background-image: url(image_path("group-expand-collapse.svg")); + background-repeat: no-repeat; +} + +.col-xl-8, .col-xl-10 { + position: relative; + padding-left: 15px; + padding-right: 15px; +} + +/* API Pages */ + +.api-reference { + h1 { + word-break: break-word; + } + + h1 + p { + margin-top: 30px; + } + + h2 { + margin-top: 10px; + margin-bottom: 10px; + font-size: 26px; + font-weight: 400; + word-break: break-word; + } + + h3 { + margin-top: 20px; + margin-bottom: 2px; + font-size: 20px; + font-weight: 500; + word-break: break-word; + } + + h3, + h4, + h4 ~ p { + code, + .code { + background-color: $code-background-color; + color: #ffffff; + margin-top: 3px; + padding: 3px 4px; + font-size: 13px; + line-height: 10px; + + a:hover, + a:focus, + a:active { + color: #fff; + + &::after { + display: none; + } + } + } + } + + h4 { + font-size: 11px; + line-height: 1.231em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-top: 20px; + margin-bottom: 0px; + + a { + color: #4f5d6c; + } + } + + h5 { + text-transform: none; + margin-top: 10px; + margin-bottom: 0; + font-size: 15px; + letter-spacing: 0; + font-family: $font-heading; + + code, + .code { + background-color: $code-background-color; + color: #ffffff; + padding: 1px 3px 2px; + font-size: 13px; + font-weight: 400; + } + } + + h4, + h5, + h4 + p, + h5 + p { + padding-left: 20px; + } + + h4 + p, + h5 + p { + font-size: 14px; + } + + p { + margin-top: 0; + margin-bottom: 5px; + + br { + display: none; + } + + br + br { + display: initial; + } + } +} + +/* Icon Card List Styles */ + +.separator-bottom { + border-bottom: 1px solid #e4e4e4; +} + +.card-list-info { + padding: 30px 0; +} + +.card-list { + list-style-type: none; + margin: 30px 0; + padding: 0; + line-height: 1.4em; + + li { + box-sizing: border-box; + vertical-align: top; + margin: 0; + padding: 0; + text-align: center; + transition: .3s all ease; + + a { + display: block; + margin: 0; + padding: 30px 0 40px; + text-decoration: none; + color: #3f4d5c; + transition: .3s all ease; + } + + p { + margin: 5px 0 0 0; + font-size: 1.25em; + } + + &:hover { + background-color: #fff; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 3px 15px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.04); + position: relative; + z-index: 1; + + a { + color: $accent; + } + } + + &:before { + display: none; + } + } + + svg { + max-width: 70px; + + path { + fill: url(#gradient); + } + } +} + +/* Media Queries */ +/* ####################################################################################################### */ + +@media (max-width: 767px) { + + #refine-search-label { + display: none; + } + + article { + font-size: 16px; + line-height: 24px; + + h1, .h1 { + font-size: 40px; + font-weight: $fw-semibold; + line-height: 36px; + word-break: break-word; + } + + h2, .h2 { + font-size: 30px; + font-weight: $fw-semibold; + line-height: 30px; + } + + h3, .h3 { + font-size: 28px; + font-weight: $fw-normal; + line-height: 26px; + } + + h4, .h4 { + font-size: 19px; + font-weight: $fw-bold; + line-height: 21px; + } + + h5, .h5 { + font-size: 13px; + line-height: 1.231em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + } + + &:not(.api-reference) > p:first-child, + &:not(.api-reference) h1 + p { + font-size: 16px; + line-height: 20px; + font-weight: $fw-normal; + font-family: $font-regular; + } + } +} + + +@media (min-width: 768px) and (max-width: 1440px) { + article { + h1, .h1 { + font-size: 50px; + font-weight: $fw-semibold; + line-height: 42px; + word-break: break-word; + } + + h2, .h2 { + font-size: 40px; + font-weight: $fw-semibold; + line-height: 40px; + } + + h3, .h3 { + font-size: 30px; + font-weight: $fw-normal; + line-height: 28px; + } + + h4, .h4 { + font-size: 21px; + font-weight: $fw-bold; + line-height: 24px; + } + + h5, .h5 { + font-size: 13px; + line-height: 1.231em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + } + + &:not(.api-reference) > p:first-child, + &:not(.api-reference) h1 + p { + font-size: 18px; + line-height: 22px; + font-weight: $fw-normal; + font-family: $font-regular; + } +} +} + +@media (max-width: 1444px) { + .feedback-ab { + .feedback-ab-submit-button-container { + width: 30%; + } + } +} + +@media only screen and (max-width: 1240px) { + #navbar { + top: 45px; + } + + .global-search { + form { + width: 100%; + } + } + + #local-search { + width: 100%; + } +} + + +/* Overrides the default which is from width 1240px, because to match our side-navigation behavior. */ +@media only screen and (min-width: 768px) { + nav.TK-Nav { + position: sticky; + position: -webkit-sticky; + top: 0; + transform: translateZ(0); + -webkit-transform: translateZ(0); + } + + .SiteRibbon { + position: sticky; + + + .PRGS-PairNav { + top: 64px; + } + } +} + +@media (min-width: 768px) { /* Styles for width >= 768px */ + span.all-components-expanded-icon { + display: none; + } + + #navbar { + select { + display: none; + } + + .main-menu { + float: right; + position: relative; + display: inline-block; + } + + a { + font-size: 12px; + padding: 0px 7px 0; + } + + .navbar-brand { + display: none; + } + } + + .navbar-header { + position: absolute; + } + + .navbar-fixed-top { + padding: 0 15px; + } + + #navbar .mobile-menu { + display: none; + } + + .side-nav { + display: block; + padding-bottom: 40px; + position: fixed; + + &.affix { + position: fixed; + } + + &.show-components { + border-left-width: 1px; + border-right-width: 1px; + top: 0px !important; + + .side-title { + padding-left: 30px; + } + + > ul > li.expanded { + &::before, + &::after { + left: 30px; + } + } + + > ul > li > ul > li > ul > li a, + > ul > li > ul > li > ul > li.expanded > a { /* Exapnded link in Level 3 / Title of Level 4 */ + padding-left: 40px; + } + + > ul > li > ul > li > ul > li > ul > li a { + padding-left: 60px; + } + } + } + + a.k-pager-nav { + float: left; + } + + .k-pager-numbers + a.k-pager-nav { + float: right; + } + + .version-picker { + float: right; + text-align: right; + margin-top: -21px !important; + } + + .copyright { + text-align: left; + } + + .social-icons { + text-align: right; + } + + article { + ul, ol { + padding: 0 0 0 12px; + } + } + + .api-index.api-columns ul { + column-count: 2; + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1025px) { /* Styles for width > 1024px */ + #navbar { + a { + font-size: 13px; + padding: 1px 10px 0; + } + + .navbar-brand { + margin-left: 31%; + width: 160px; + display: block; + + .scroll & { + width: 230px; + background-position: 0 8px; + margin-left: 0; + + a { + font-size: 15px; + } + } + } + } + + .component-item { + .highlights & { + h2 { + font-size: 2em; + } + } + } + + /* Package Components Overview List */ + .components-overview-list { + a { + min-height: 190px; + } + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1199px) { /* Styles for width > 1199px */ + .component-item { + padding-left: 0; + padding-top: 36px; + + .highlights & { + h2 { + font-size: 1.6em; + } + + .component-icon { + top: 0; + } + } + } + + .component-icon { + top: 0px; + + > svg { + vertical-align: bottom; + } + } + + .nav-container { + .scroll & { + width: 100%; + margin-left: 0; + } + } + + #navbar { + .navbar-brand { + width: 220px; + margin-left: 8.33%; + } + + a { + font-size: 15px; + } + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1441px) { /* Styles for width > 1440px */ + .feedback-ab { + .vote-buttons-container { + width: 33%; + } + } + + .side-nav { + font-size: 16px; + + ul { + font-size: 16px; + } + + #page-tree > .k-group > .k-item, + #page-tree-api > .k-group > .k-item { + > div { + .k-in, span > a { + font-weight: 500; + font-size: 16px; + } + } + } + } + + .components { + font-size: 16px; + } + + .article-toc, .related-articles, .feedback-ab { + .anchor-h1, + .anchor-h2 { + font-family: $font-medium; + font-size: 16px; + } + } + + .article-toc, .feedback-ab { + .layout-components &.affix-top { + top: 170px; + } + } + + .feedback-ab ~ .article-toc { + .layout-components &.affix-top { + top: 270px; + } + } + + .api-index.api-columns ul { + column-count: 3; + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1601px) { /* Styles for width > 1600px */ + #navbar { + a { + font-size: 12px; + padding: 1px 7px 0; + } + + .main-menu { + margin-right: -8px; + } + } + + .navbar > .container-fluid .navbar-brand { + margin-left: -7px; + } + + .nav-container { + width: 83.33333333%; + margin-left: 8.33333333%; + + .scroll & { + width: 83.33333333%; + margin-left: 8.33333333%; + } + } + + #navbar { + .navbar-brand { + width: 220px; + margin-left: 0; + + .scroll & { + margin-left: 0; + } + } + } + + .global-search { + right: 90px; + } + + .col-xl-offset-0 { + margin-left: 0; + } + + .col-xl-offset-1 { + margin-left: 8.33333333%; + } + + .col-xl-offset-2 { + margin-left: 16.66666667%; + } + + .col-xl-8 { + width: 66.66666667%; + float: left; + } + + .col-xl-10 { + width: 83.33333333%; + float: left; + } + + .component-item { + padding-left: 36px; + padding-top: 0; + + .highlights & { + h2 { + font-size: 2.5em; + } + + .component-icon { + top: 9px; + } + } + } + + .component-icon { + top: 2px; + + > svg { + vertical-align: top; + } + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1801px) { /* Styles for width > 1800px */ + #navbar { + a { + font-size: 15px; + padding: 1px 10px 0; + } + } + + .global-search { + right: 100px; + } + + body, + article, + blockquote, + #results > div { + font-size: 16px; + } +} + +@media (min-width: 1200px) { + .auto-clear .col-lg-1:nth-child(12n+1) { + clear: left; + } + + .auto-clear .col-lg-2:nth-child(6n+1) { + clear: left; + } + + .auto-clear .col-lg-3:nth-child(4n+1) { + clear: left; + } + + .auto-clear .col-lg-4:nth-child(3n+1) { + clear: left; + } + + .auto-clear .col-lg-6:nth-child(odd) { + clear: left; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .auto-clear .col-md-1:nth-child(12n+1) { + clear: left; + } + + .auto-clear .col-md-2:nth-child(6n+1) { + clear: left; + } + + .auto-clear .col-md-3:nth-child(4n+1) { + clear: left; + } + + .auto-clear .col-md-4:nth-child(3n+1) { + clear: left; + } + + .auto-clear .col-md-6:nth-child(odd) { + clear: left; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .auto-clear .col-sm-1:nth-child(12n+1) { + clear: left; + } + + .auto-clear .col-sm-2:nth-child(6n+1) { + clear: left; + } + + .auto-clear .col-sm-3:nth-child(4n+1) { + clear: left; + } + + .auto-clear .col-sm-4:nth-child(3n+1) { + clear: left; + } + + .auto-clear .col-sm-6:nth-child(odd) { + clear: left; + } +} + +@media (max-width: 767px) { + div#content { + padding-top: 0; + } + + #navbar { + position: relative; + top: 0; + } + + .side-nav { + margin-top: 89px; + } + + .auto-clear .col-xs-1:nth-child(12n+1) { + clear: left; + } + + .auto-clear .col-xs-2:nth-child(6n+1) { + clear: left; + } + + .auto-clear .col-xs-3:nth-child(4n+1) { + clear: left; + } + + .auto-clear .col-xs-4:nth-child(3n+1) { + clear: left; + } + + .auto-clear .col-xs-6:nth-child(odd) { + clear: left; + } +} + +/* Modificators */ + +.mt-0 { + margin-top: 0px !important; +} + +.mt-5 { + margin-top: 5px !important; +} + +.mt-10 { + margin-top: 10px !important; +} + +.mt-20 { + margin-top: 20px !important; +} + +.mt-30 { + margin-top: 30px !important; +} + +.mt-40 { + margin-top: 40px !important; +} + +.mt-50 { + margin-top: 50px !important; +} + +.mt-60 { + margin-top: 60px !important; +} + +.mt-70 { + margin-top: 70px !important; +} + +.mt-80 { + margin-top: 80px !important; +} + +.mt-90 { + margin-top: 90px !important; +} + +.mt-100 { + margin-top: 100px !important; +} + +.mb-0 { + margin-bottom: 0px !important; +} + +.mb-5 { + margin-bottom: 5px !important; +} + +.mb-10 { + margin-bottom: 10px !important; +} + +.mb-20 { + margin-bottom: 20px !important; +} + +.mb-30 { + margin-bottom: 30px !important; +} + +.mb-40 { + margin-bottom: 40px !important; +} + +.mb-50 { + margin-bottom: 50px !important; +} + +.mb-60 { + margin-bottom: 60px !important; +} + +.mb-70 { + margin-bottom: 70px !important; +} + +.mb-80 { + margin-bottom: 80px !important; +} + +.mb-90 { + margin-bottom: 90px !important; +} + +.mb-100 { + margin-bottom: 100px !important; +} + +.pt-0 { + padding-top: 0px !important; +} + +.pt-5 { + padding-top: 5px !important; +} + +.pt-10 { + padding-top: 10px !important; +} + +.pt-20 { + padding-top: 20px !important; +} + +.pt-30 { + padding-top: 30px !important; +} + +.pt-40 { + padding-top: 40px !important; +} + +.pt-50 { + padding-top: 50px !important; +} + +.pt-60 { + padding-top: 60px !important; +} + +.pt-70 { + padding-top: 70px !important; +} + +.pt-80 { + padding-top: 80px !important; +} + +.pt-90 { + padding-top: 90px !important; +} + +.pt-100 { + padding-top: 100px !important; +} + +.pb-0 { + padding-bottom: 0px !important; +} + +.pb-5 { + padding-bottom: 5px !important; +} + +.pb-10 { + padding-bottom: 10px !important; +} + +.pb-20 { + padding-bottom: 20px !important; +} + +.pb-30 { + padding-bottom: 30px !important; +} + +.pb-40 { + padding-bottom: 40px !important; +} + +.pb-50 { + padding-bottom: 50px !important; +} + +.pb-60 { + padding-bottom: 60px !important; +} + +.pb-70 { + padding-bottom: 70px !important; +} + +.pb-80 { + padding-bottom: 80px !important; +} + +.pb-90 { + padding-bottom: 90px !important; +} + +.pb-100 { + padding-bottom: 100px !important; +} + +.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, +.col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, +.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, +.col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { + min-height: 0; +} + +.k-loading-mask { /* stop search results from "jumping" */ + display: none; +} + +.coming-soon { + opacity: 0.5; + cursor: default; + + a, + h2 > a:hover, + h2 > a:active { + cursor: default; + color: inherit; + } +} + +pre { + margin: 5px 0 20px; + padding: 15px; + overflow: auto; + background-color: #f8f8f8; + border: 1px solid #ececec; + border-radius: 0; + -webkit-transform: translateZ(0); + + &.preview, + &.preview + pre, + &.preview + pre + pre { + display: none; + + .no-js &, + &[data-code-language] { + display: block; + } + } + + &:hover .copy-btn { + display: block; + } + + &.language-html, + &.language-jsx { + margin: 0 0 10px; + border-radius: 0; + background-color: #fff; + border: 1px solid #ececec; + clear: both; + } + + .file-list & { + padding: 0; + } +} + +.copy-btn { + position: absolute; + top: 6px; + right: 4px; + z-index: 2; + color: $link-color; + display: none; + border-width: 0; + border-radius: 0; + font-family: $font-regular; + font-size: 13px; + line-height: 1.2; + padding-left: 25px; + text-transform: uppercase; + background: #fff url(image_path("copy.svg")) no-repeat 5px 50%; + + &:hover, + &:active, + &:focus { + color: $link-color; + outline: 0; + background: #fff url(image_path("copy.svg")) no-repeat 5px 50%; + box-shadow: none; + } + + &:active:focus { + color: $link-hover-color; + outline: 0; + } + + .file-list & { + right: 0; + padding-right: 0; + } +} + +code { + display: inline-block; + margin: 0 1px; + padding: 0 5px 0 4px; + color: inherit; + word-break: normal; + background-color: #ededed; + font-family: inherit; + font-size: 90%; + line-height: 1.40em; + letter-spacing: 0; + text-transform: none; + border: 0; + border-radius: 0; + + a & { + color: $accent; + } + + a:hover &, + a:focus &, + a:active & { + color: $link-hover-color; + text-decoration: underline; + } + + blockquote & { + color: $link-color; + } + + blockquote { + a & { + color: $accent; + } + + a:hover &, + a:focus &, + a:active & { + text-decoration: none; + } + } + + pre & { + font-family: $font-code; + font-size: 12px; + line-height: 1.3; + box-shadow: none; + } +} + +.api-index { + padding-top: 60px; + padding-bottom: 60px !important; + + li { + overflow: hidden; + text-overflow: ellipsis; + } + + &.api-columns .col-xs-w { + width: 100% !important; + } +} + +.symbol { + width: 24px; + height: 24px; + text-indent: -1px; + border: 2px solid currentColor; + text-align: center; + line-height: 19px; + letter-spacing: normal; + font-size: 13px; + font-weight: 900; + top: -2px; + left: -34px; + + &::after { + content: ""; + display: block; + height: 5px; + width: 5px; + position: absolute; + bottom: -2px; + right: -2px; + background-color: #f8f8f8; + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), rgba(0, 0, 0, 0) calc(50% + 1px), rgba(0, 0, 0, 0) 100%); + } +} + +.symbol-const { + color: #9575cd; +} + +.symbol-const:before { + content: 'K'; +} + +.symbol-decorator { + color: #0262C2; +} + +.symbol-decorator:before { + content: '@'; +} + +.symbol-directive { + color: #db4437; +} + +.symbol-directive:before { + content: 'D'; +} + +.symbol-class { + color: #4285f4; +} + +.symbol-class:before { + content: 'C'; +} + +.symbol-component { + color: #db4437; +} + +.symbol-component:before { + content: 'C'; +} + +.symbol-constant { + color: #9575cd; +} + +.symbol-constant:before { + content: 'K'; +} + +.symbol-interface { + color: #0097a7; +} + +.symbol-interface:before { + content: 'I'; +} + +.symbol-function { + color: #0f9d58; +} + +.symbol-function:before { + content: 'F'; +} + +.symbol-union { + color: #757575; +} + +.symbol-union:before { + content: 'U'; +} + +.symbol-enumeration { + color: #757575; +} + +.symbol-enumeration:before { + content: 'E'; +} + +.registration-form { + width: 543px; + height: 730px; + padding: 0px 80px; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + + h4 { + margin-top: 0px; + } + + iframe { + width: 100%; + height: 640px !important; + border: 0; + } +} + +/* START TabStrip styles */ + +.k-tabstrip { + margin: 0; + padding: 0; + zoom: 1; + position: relative; +} + +.k-tabstrip-items { + padding: 0.3em 0.3em 0; +} + +.k-tabstrip-scrollable .k-tabstrip-items { + white-space: nowrap; + overflow: hidden; +} + +.k-tabstrip > .k-button.k-bare { + position: absolute; + top: .27em; + z-index: 2; + user-select: none; +} + +.k-tabstrip-bottom > .k-button.k-bare { + top: auto; + bottom: .15em; +} + +.k-tabstrip-prev { + left: .4em; +} + +.k-tabstrip-next { + right: .4em; +} + +.k-tabstrip-items .k-item, +.k-panelbar .k-tabstrip-items .k-item { + list-style-type: none; + display: inline-block; + position: relative; + border-style: solid; + border-width: 1px 1px 0; + padding: 0; + vertical-align: top; +} + +.k-tabstrip-items .k-item { + overflow: hidden; +} + +.k-tabstrip-items .k-tab-on-top, +.k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-items .k-state-active { + margin-bottom: -1px; + padding-bottom: 1px; +} + +.k-tabstrip-top > .k-tabstrip-items .k-item, +.k-panelbar .k-tabstrip-items .k-item { + margin: 0 -1px 0 0; +} + +.k-tabstrip-top > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-top > .k-tabstrip-items .k-state-active { + border-bottom-width: 1px; + margin-bottom: -1px; + padding-bottom: 0px; +} + +.k-tabstrip-items .k-tab-on-top { + z-index: 1; +} + +.k-tabstrip-items .k-link, +.k-panelbar .k-tabstrip-items .k-link { + display: inline-block; + border-bottom-width: 0; + padding: .5em .92em; +} + +.k-tabstrip-items .k-icon, +.k-panelbar .k-tabstrip-items .k-icon { + margin: -1px 4px 0 -3px; + vertical-align: top; +} + +.k-tabstrip-items .k-item .k-image, +.k-tabstrip-items .k-item .k-sprite, +.k-panelbar .k-tabstrip-items .k-item .k-image, +.k-panelbar .k-tabstrip-items .k-item .k-sprite { + margin: -3px 3px 0 -6px; + vertical-align: middle; +} + +// TabStrip Loading Progress +.k-tabstrip-items .k-loading { + top: 0; + left: 0; + height: 0; + width: 20%; + position: absolute; + background: transparent; + border-top: 1px solid transparent; + border-color: inherit; +} + +.k-tabstrip-items .k-loading.k-complete { + width: 100%; +} + +.k-tabstrip > .k-content, +.k-panelbar .k-tabstrip > .k-content { + position: static; + border-style: solid; + border-width: 1px; + margin: 0 .286em .3em; + padding: .92em; + zoom: 1; +} + +.k-tabstrip > .k-content { + display: none; + overflow: auto; +} + +.k-tabstrip > .k-content.km-scroll-wrapper { + padding: 0; +} + +.k-tabstrip > .k-content > .km-scroll-container { + padding: .3em .92em; +} + +@keyframes k-tab-loader { + 0% { + left: 0; + } + + 50% { + left: 80%; + } + + 100% { + left: 0; + } +} + +// left and right tabs + +.k-tabstrip-left > div.k-content, +.k-tabstrip-right > div.k-content { + margin: .286em .3em; +} + +.k-tabstrip-left > .k-tabstrip-items .k-item, +.k-tabstrip-right > .k-tabstrip-items .k-item { + display: block; + margin-bottom: -1px; +} + +.k-tabstrip-left > .k-tabstrip-items .k-link, +.k-tabstrip-right > .k-tabstrip-items .k-link { + display: block; +} + +.k-tabstrip-left > .k-tabstrip-items .k-tab-on-top, +.k-tabstrip-right > .k-tabstrip-items .k-tab-on-top, +.k-tabstrip-left > .k-tabstrip-items .k-state-active, +.k-tabstrip-right > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-left > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-right > .k-tabstrip-items .k-state-active { + margin-bottom: -1px; + padding-bottom: 0; +} + +// left tabs + +.k-tabstrip-left > .k-tabstrip-items { + float: left; + padding: .25em 0 .3em .3em; +} + +.k-tabstrip-left > .k-tabstrip-items .k-item { + border-width: 1px 0 1px 1px; + border-radius: 3px 0 0 3px; +} + +.k-tabstrip-left > .k-tabstrip-items .k-state-active { + border-width: 1px 0 1px 1px; +} + +.k-tabstrip-left > .k-tabstrip-items .k-tab-on-top, +.k-tabstrip-left > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-left > .k-tabstrip-items .k-state-active { + margin-right: -1px; + padding-right: 1px; +} + +// right tabs + +.k-tabstrip-right > .k-tabstrip-items { + float: right; + padding: .25em .3em .3em 0; +} + +.k-tabstrip-right > .k-tabstrip-items .k-item { + border-width: 1px 1px 1px 0; + border-radius: 0 3px 3px 0; +} + +.k-tabstrip-right > .k-tabstrip-items .k-state-active { + border-width: 1px 1px 1px 0; +} + +.k-tabstrip-right > .k-tabstrip-items .k-tab-on-top, +.k-tabstrip-right > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-right > .k-tabstrip-items .k-state-active { + margin-left: -1px; + padding-left: 1px; +} + +// bottom tabs + +.k-tabstrip-bottom > .k-tabstrip-items { + margin-top: -1px; + padding: 0 .3em .3em; +} + +.k-tabstrip-bottom > .k-content, +.k-panelbar .k-tabstrip-bottom > .k-content { + margin: .3em .286em 0; + z-index: 1; + position: relative; +} + +.k-tabstrip-bottom > .k-tabstrip-items .k-item { + border-width: 0 1px 1px; + border-radius: 0 0 4px 4px; +} + +.k-tabstrip-bottom > .k-tabstrip-items .k-state-active { + margin-bottom: 0; + padding-bottom: 0; +} + +.k-tabstrip-bottom > .k-content { + min-height: 100px; +} + +.k-tabstrip-bottom > .k-tabstrip-items .k-loading { + top: auto; + bottom: 0; +} + +.k-tabstrip-wrapper { + margin-bottom: 20px; + + ul { + margin-top: 0 !important; + } +} + +.k-tabstrip { + border: 1px solid #ebecee; + background-color: #f8f8f8; + + .k-item, + .k-link, + .k-content, + .k-content pre, + .k-loading { + border: 0; + } + + .k-content { + max-height: 40vh; + } + + .k-tabstrip-items { + .k-state-active { + font-weight: bold; + color: #000; + background: white; + } + + .k-item { + font-weight: bold; + } + } + + .prettyprint { + padding: 0; + } +} + +.prettyprint { + width: 100%; + border-color: #ebecee; +} + +.prettyprint code { + line-height: 1.4; +} + +/* END TabStrip styles */ + +/* START Introduction page all controls table styles */ + +article #allcontrols-table { + border: none; + word-wrap: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + overflow-wrap: break-word; + font-size: 15px; + margin: 15px 0 20px; + + .row { + margin-left: -15px; + margin-right: -15px; + font-size: 0; + } + + .column { + position: relative; + display: inline-block; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; + font-size: 16px; + vertical-align: top; + + // X-Small devices (portrait phones, less than 576px) + @media (max-width: 575.98px) { width: 100%; } + + @media (min-width: 576px) { width: 50%; } + + @media (min-width: 768px) { width: 33%; } + + @media (min-width: 1200px) { width: 25%; } + } + + ul { + list-style: none; + padding: 5px 0px; + margin: 0; + + li { + padding: 5px 0px; + } + } + + .control-category { + color: $accent; + text-transform: uppercase; + font-size: 20px; + font-weight: bold; + padding: 3px 0px; + } + + ul:not(.docs-tabstrip) li:before { + background-color: transparent !important; + } +} + +/* END Introduction page all controls table styles */ + +/* Kendo loading indicator in API*/ +div#sidetoc { + .k-loading-mask { + background-image: url(image_path("loading-image.gif")); + background-repeat: no-repeat; + z-index: 10000; + background-position-x: center; + background-position-y: center; + } + + .k-loading-text { + display: none; + } +} + +div { + &.k-content { + &.k-state-active { + .copy-code-btn { + padding: 7px 10px; + } + } + } +} + +.copy-code-btn { + position: absolute; + top: 0; + right: 0; + padding: 10px; + z-index: 100; + + &:hover { + cursor: pointer; + } +} + +/* CTA Panels styles */ + +/* Make sure CTA avatars are included */ +.kd-Kendoka-avatar { + background: url(image_path("Avatar-Kendoka-big.svg")) no-repeat 50% 50%; +} + +.kd-DevCraft-avatar { + background: url(image_path("Avatar-DevCraft-big.svg")) no-repeat 50% 50%; +} + +.kd-Ninja-avatar { + background: url(image_path("Avatar-Ninja-big.svg")) no-repeat 50% 50%; +} + +.kd-cta { + padding: 15px 30px; + margin-top: 32px; + display: inline-flex; + align-items: center; + border-width: 1px; + border-style: solid; + border-color: #5777EA; + border-radius: 2px +} + +.kd-cta-panel .container{ + width: auto; +} + +.kd-cta-panel.cta-small { + text-align: center; +} + +.kd-cta-content-wrapper { + display: flex; + -ms-flex-direction: row; + align-items: center +} + +.kd-cta-image { + margin-right: 30px +} + +.kd-cta-image img { + width: 50px; + margin: 0; +} + +h5.kd-cta-title { + margin-top: 0; + margin-bottom: 5px; + font-size: 28px; + font-weight: 700; + text-transform: none; +} + +.kd-cta-title { + margin-bottom: 5px +} + +.kd-cta-button-wrapper { + flex: none; + margin-left: 50px +} +.kd-button-primary { + background-color: #F46147; + color: #fff; + border-color: transparent; +} +.kd-button-md { + padding: 5px 24px; + font-weight: 400; + font-size: 19px; + line-height: 32px; +} +.kd-button { + display: inline-block; + border-radius: 2px; + text-align: center; + cursor: pointer; + text-decoration: none; + border-width: 2px; + border-style: solid; + transition: color .2s ease,background-color .2s ease,border-color .2s ease; +} +.kd-cta-lg { + padding: 16px 28px; + width: 1000px; + max-width: 100% +} + +.kd-cta-full-width { + width: 100% +} + +.kd-cta-lg .kd-cta-image img { + width: 100px +} + +.kd-cta-title-desc { + flex: 1 0 0 +} + +.kd-cta .kd-link { + font-weight: 700 +} + +.kd-cta-sm { + padding: 11px 32px +} + +.kd-cta-sm .kd-link,.kd-cta-sm .kd-text { + margin: 0; + font-weight: 500; + font-size: 28px +} + +.kd-cta-sm .kd-text { + color: #1F1F1F +} + +@media only screen and (max-width: 1440px) { + h5.kd-cta-title { + font-size:18px; + line-height: 22px + } +} + +@media (max-width: 1064px) { + .kd-cta,.kd-cta-content-wrapper { + display:block; + } + + .kd-cta-image { + margin-right: 0; + margin-bottom: 20px + } + + .kd-cta-button-wrapper { + margin-left: 0; + margin-top: 20px + } + + .kd-cta:not(.kd-cta-lg) .kd-cta-image { + display: none + } +} +/* END CTA Panels styles*/ diff --git a/_assets/css/_styles-save.scss b/_assets/css/_styles-save.scss new file mode 100644 index 0000000..4b12b81 --- /dev/null +++ b/_assets/css/_styles-save.scss @@ -0,0 +1,4668 @@ +html, +body { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-font-feature-settings: "liga","kern"; + font-feature-settings: "liga","kern"; + -moz-osx-font-smoothing: grayscale; +} + +body, +article, +blockquote, +#results > div, +.side-nav, +.components { + font-size: 14px; + line-height: 1.2em; +} + +html { + height: 100%; + background-color: #FFFFFF; +} + +body { + min-height: 100%; + height: 100%; + position: relative; + font-family: $font-regular; + background-color: transparent; + color: $text-default-color; + transition: padding-top .1s; + padding-top: 95px; // navbar-fixed-top height + 20px margin + + &.scroll { + padding-top: 70px; + } + + &.scroll-page, + &.scroll-small-page { + height: auto !important; + } +} + +label { + font-weight: normal; + margin-bottom: 0; +} + +.img-responsive, +.img-responsive img { + -webkit-user-drag: none; + -moz-user-select: none; + user-drag: none; +} + +image { + width: auto; + height: auto; + max-width: 100%; +} + +div.caption { + color: #000000; + font-weight: 500; + font-size: 18px; + letter-spacing: -0.02em; + line-height: 1.222em; +} + +/* Sticky Footer Styles */ + +div#content { + min-height: 100%; + height: auto !important; + height: 100%; + margin: 0 auto -340px; + position: relative; + overflow: hidden; +} + +#push, +div#footer { + min-height: 340px; +} + +div#footer { + color: #000; + background-color: $footer-bg; + font-size: 11px; + line-height: 1.3em; + bottom: 0; + left: 0; + right: 0; + position: relative; + + h1, h2, h3, h4, h5, h6 { + color: #616161; + } + + h6 { + font-size: 14px; + font-family: $font-medium; + letter-spacing: 0.02rem; + text-transform: uppercase; + } + + ul { + font-size: 15px; + line-height: 22px; + } + + a { + color: #000; + transition: color .2s; + + &:hover, + &:focus { + opacity: 0.7; + } + } + + p { + color: #4f5d6c; + } + + .environment-develop & { + background-color: $env-develop-bg; + + h1, h2, h3, h4, h5, h6, + a:hover, + a:focus { + color: #ffd0a6; + } + } +} + +.copyright { + position: relative; + margin-top: 40px; + text-align: center; +} + +.social-icons { + padding-bottom: 50px; + + @media screen and (max-width: 1820px){ + padding-bottom: 30px; + } + + @media screen and (max-width: 768px){ + padding-bottom: 10px; + } +} + +#footer { + .social-icon { + text-align: center; + height: 30px; + line-height: 26px; + margin: 0; + padding: 0 15px; + text-align: center; + transition: opacity .2s; + + &:last-child { + padding-right: 0; + } + } + + .progress-logo { + p { + margin-top:10px; + } + } + + .legal-links-container{ + text-align: right; + + @media screen and (max-width: 768px){ + text-align: center; + } + + .legal-links { + padding:0; + + li { + list-style-type: none; + display: inline-block; + font-weight: 500; + font-size: 12px; + + &:not(:first-child) { + padding-left: 3px; + border-left: 1px solid #ccc; + } + } + } + + .dnsmpi { + border: 2px solid rgba(148, 216, 255, 0.533); + padding: 8px 16px; + + &:hover { + text-decoration: none; + opacity: 1; + border-color: rgb(148, 216, 255) + } + } + } +} + +.social-icon { + &:hover { + opacity: 0.5; + } + + svg { + width: 24px; + height: 24px; + vertical-align: middle; + } + + path { + fill: #1f1f1f; + } +} + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + color: $text-headings-color; + font-family: $font-heading; +} + +h1, .h1 { + font-size: 60px; + font-weight: $fw-semibold; + line-height: 54px; + word-break: break-word; +} + +h2, .h2 { + font-size: 45px; + font-weight: $fw-semibold; + line-height: 44px; +} + +h3, .h3 { + font-size: 35px; + font-weight: $fw-normal; + line-height: 34px; +} + +h4, .h4 { + font-size: 23px; + font-weight: $fw-bold; + line-height: 27px; +} + +h5, .h5 { + font-size: 13px; + line-height: 1.231em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +p.lead { + font-size: 20px; + font-family: $font-regular; + line-height: 1.3; + color: #4f5d6c; + margin-bottom: 0; +} + +.sticky { + display: inline-block; +} + +a { + color: $link-color; /*0277bd*/ +} + +a:link, +a:hover, +a:focus, +a:active { + text-decoration: none; + outline: none; +} + +a:hover, +a:focus, +a:active { + color: $link-hover-color; +} + +b, +strong { + font-weight: 500; +} + +.clearfix:after { + display: block; + clear: both; + content: ""; + height: 0; + line-height: 0; +} + +.list-unstyled { + line-height: 30px; +} + +.release-date { /* Release date style in version heading h2 */ + font-size: .6em; + color: #4f5d6c; +} + +/* NavBar */ + +.navbar-fixed-top .navbar-collapse, +.navbar-fixed-bottom .navbar-collapse { + max-height: 360px; +} + +.navbar { + min-height: 34px; + line-height: 0; + margin-bottom: 0; + border-bottom: 0; + transition: top .1s, background-color .1s; + + .no-js &, + .scroll & { + background-color: #fff; + box-shadow: 0 0 12px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05); + } + + /* Hamburger Button Styles */ + .navbar-toggle { + width: 50px; + height: 50px; + padding: 0; + margin: 0; + background-color: transparent; + background-image: none; + border: 0; + border-radius: 0; + + &:hover, + &:focus { + background-color: #353c43; + } + + .icon-bar { + margin-left: auto; + margin-right: auto; + } + } +} + +.navbar-nav { + margin: 0 -15px; +} + +.navbar-collapse { + width: 100%; + padding-left: 0; + padding-right: 0; +} + +// Hat menu +nav.TK-Nav, .PRGS-PairNav { + width: 100%; + margin-top: -95px; +} + +// Ribbon Announcement + +#announcement-banner { + width: 100%; + position: fixed; + z-index: 40000; + left: 0; + top: 61px; + + .close-button-container { + position: absolute; + top: 19px; + right: 16px; + z-index: 100000; + + &:hover { + cursor: pointer; + } + } +} + + +@media screen and (max-width: 1240px){ + #announcement-banner { + top: 45px; + + #announcement-content > * { + padding-right: 40px; + } + } +} + +/* Main Menu */ + +$text-color: #4a4e52; +$hover-text: darken($text-color, 10%); + +#navbar { + $line-height: 35px; + $selection-size: 3px; + + transition: padding-top .1s; + padding-top: 20px; + margin-bottom: 20px; + + .scroll & { + background-color: #FFFFFF; + padding-top: 10px; + padding-bottom: 10px; + position: fixed; + top: 0; + width: 100%; + z-index: 10; + box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.2); + } + + a { + font-size: 15px; + padding: 1px 10px 0; + transition: line-height .1s; + line-height: $line-height; + color: $text-color; + text-transform: uppercase; + font-weight: 500; + font-family: $font-heading; + letter-spacing: 0; + background-color: transparent; + + &::after { + content: ""; + height: $selection-size; + display: block; + background-color: transparent; + transition: background-color .3s; + } + } + + a:hover::after, + a:focus::after, + a:active::after, + .active a::after { + background-color: $accent; + } + + li { + position: static; + } + + select { + position: absolute; + top: 54px; + transition: top .1s; + right: 15px; + max-width: 45%; + padding: 3px 10px 4px; + border: 1px solid #f1f1f1; + background: #ffffff; + box-shadow: 0 1px 1px 0 transparent; + font-family: inherit; + font-size: inherit; + outline: none; + + .scroll & { + top: 5px; + max-width: 30%; + } + } + + .main-menu { + display: none; + } + + svg { + display: block; + width: 20px; + height: 20px; + position: relative; + top: 45%; + transform: perspective(1px) translateY(-55%); + } + + .search-icon { + height: $line-height + $selection-size; + cursor: pointer; + + path { + fill: $text-color; + transition: fill .2s; + } + + &::after { + visibility: hidden; + } + + &:hover path, + &:active path, + &:focus path { + fill: $accent; + } + } + + .nav-button a { + background-color: $accent-solid; + + &:hover, + &:active { + background-color: darken($accent-solid, 10%); + } + } + + .primary-cta a { + background-color: $try-now; + + &:hover, + &:active { + background-color: $try-now-hover; + } + } + + .primary-cta a, .nav-button a { + color: #fff; + padding: 2px 20px 2px; + margin-left: 12px; + + &::after { + display: none; + } + } +} + +// hide primary cta on homepage until scrolled +.brand-homepage { + .navbar { + position: absolute; + box-shadow: none; + } + + .global-search { + right: 0; + } + + .primary-cta, .nav-button { + display: none; + } + + // duplicate styles with sticky navbar positioning + &.scroll-page { + .navbar { + position: fixed; + box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); + } + + .global-search { + right: 90px; + } + + .primary-cta, .nav-button { + display: block; + } + } +} + +/* Main Wrapper */ + +.overview { + padding-top: 50px; +} + +/* Getting started styles */ + +.brand-getting-started { + .call-to-action { + background-color: $accent; + color: #fff; + padding: 15px 24px; + margin-right: 2em; + display: inline-block; + text-transform: uppercase; + + &:hover, + &:active { + background-color: darken($accent, 10%); + color: #fff; + } + } + + #content article { + .call-to-action-info { + color: #4f5d6c; + width: 65%; + margin-bottom: 60px; + } + + hr { + margin: 50px 0; + } + } +} + +/* Breadcrumbs */ + +.breadcrumbs { + color: #95a3b1; + font-size: 16px; +} + +/* Version Picker */ + +#version { + background: transparent; + border: 0; + font-size: inherit; + color: $link-color; + font-family: $font-medium; + outline: none; + + &:hover { + color: $accent; + } + + option { + color: #000; + } +} + +/* Side-Nav Styles */ +$nav-icon-color: #979797; + +#page-tree, +#page-tree-api { + padding: 0; + white-space: normal; + word-break: break-word; + overflow: hidden; + font-family: "Metric", Helvetica, Arial, sans-serif; + outline: none; +} + +.side-nav { + padding-top: 25px; + padding-left: 0; + padding-right: 0; + top: 0; + left: 0; + overflow: auto; + position: fixed; + display: none; + background-color: #fff; + border: 1px solid #ececec; + z-index: 1070; + + #page-tree, + #page-tree-api { + .k-item { + padding-left: 0; + } + + ul:focus { + outline: none; + } + + ul li ul li { + span { + font-size: 16px; + line-height: 20px; + } + + ul li { + span { + font-size: 15px; + } + } + } + } + + .k-treeview .k-in { + border: 0; + line-height: 1.2em; + padding-right: 0; + } + + .k-in { + cursor: pointer; + display: block; + padding-left: 30px; + padding-top: 8px; + padding-bottom: 8px; + color: $navigation-link-color; + text-decoration: none; + } + + .k-state-hover { + background-color: $link-background-color; + } + + .k-state-selected { + color: $side-nav-link-color; + + a { + color: $side-nav-link-color; + font-weight: $side-nav-selected-fw; + + &:hover { + background-color: $link-background-color; + } + + &:active { + background-color: transparent; + color: $side-nav-link-color; + } + } + } + + .k-icon, .article { + position: relative; + margin: 0; + padding: 0; + } + + .article { + position: absolute; + left: 20px; + top: 5px; + } + + .k-icon:before { + content: ""; + display: none; + } + + #page-tree > .k-group > .k-item, + #page-tree-api > .k-group > .k-item { + > .k-last { + border-bottom: 1px solid $border-separator-color; + margin-right: 5px; + } + + div { + position: relative; + + > .k-icon { + position: absolute; + width: 36px; + height: 16px; + top: 25%; + + &.k-i-expand { + background: url(image_path("group-expand-collapse.svg")) no-repeat 50% 50%; + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + color: $nav-icon-color; + } + + &.k-i-collapse { + background: url(image_path("group-expand-collapse.svg")) no-repeat 50% 50%; + } + } + } + + // Side navigation root items + > div { + border-bottom: 1px solid $border-separator-color; + margin-right: 5px; + + > .k-icon { + display: none; + } + + .k-in, span > a { + text-transform: uppercase; + transition: background-color .1s, padding .1s, font-weight .1s; + font-weight: $fw-semibold; + color: $text-active-color !important; + font-size: 16px; + font-family: $font-regular; + line-height: 28px; + } + + .k-icon { + top: 25%; + left: auto; + } + + .k-in .article { + right: 15px; + top: 50%; + left: auto; + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + display: none; + } + } + } + + .k-group .k-group { + .k-item { + .k-icon { + &.k-i-collapse, + &.k-i-expand { + top: 11px !important; + width: 16px !important; + height: 14px !important; + opacity: 0.6; + position: absolute; + } + } + } + + .k-in { + padding-left: 48px; + + a { + padding-left: 48px; + margin-left: -48px; + padding-top: 6px; + margin-top: -6px; + padding-bottom: 6px; + margin-bottom: -6px; + } + } + + .k-icon, .article { + left: 28px; + } + + .k-group { + .k-in { + padding-left: 66px; + font-weight: 400; + + a { + padding-left: 66px; + margin-left: -66px; + } + } + + .k-icon, .article { + left: 46px; + } + + .k-group { + .k-in { + padding-left: 84px; + + a { + padding-left: 84px; + margin-left: -84px; + } + } + + .k-icon, .article { + left: 64px; + } + + .k-group { + .k-in { + padding-left: 102px; + + a { + padding-left: 102px; + margin-left: -102px; + } + } + + .k-icon, .article { + left: 82px; + } + + .k-group { + .k-in { + padding-left: 120px; + + a { + padding-left: 120px; + margin-left: -120px; + } + } + + .k-icon, .article { + left: 100px; + } + } + } + } + } + } + + .side-title { + padding-left: 30px; + padding-bottom: 10px; + } + + &.show-components { + display: block; + padding-bottom: 15px; + background-color: #fff; + border-bottom: 1px solid #e4e4e4; + border-left-width: 0; + border-right-width: 0; + z-index: 1100; + width: 100%; + + .side-title { + padding-left: 15px; + } + + > ul > li > ul > li > ul > li a { /* Exapnded link in Level 3 / Title of Level 4 */ + padding-left: 25px; + } + + > ul > li > ul > li > ul > li > ul > li a { + padding-left: 45px; + } + } + + ul { + list-style: none; + margin: 0; + padding: 0; + font-family: $font-medium; + } + + a { + display: block; + position: relative; + line-height: 1em; + text-decoration: none; + transition: background-color .2s; + overflow: hidden; + text-overflow: ellipsis; + color: $navigation-link-color; + } + + a.active { + color: $accent !important; + font-family: $font-medium; + } + + > ul > li > a { + font-weight: 500; + line-height: 1.2em; + } + + > ul > li.expanded { + background: #fafafa; + margin: 10px 0; + } + + > ul > li > ul { /* Level 2 */ + padding: 0 0 10px 0; + font-size: 14px; + font-family: $font-regular; + } + + > ul > li > ul > li a { + padding-top: 7px; + padding-bottom: 7px; + color: $link-color; + } + + /* Level 3 */ + + > ul > li > ul > li > ul { + font-size: 14px; + font-family: $font-light; + } + + > ul > li > ul > li > ul > li a { + padding-left: 40px; + padding-top: 5px; + padding-bottom: 5px; + } + + > ul > li > ul > li > ul > li.expanded > a { /* Exapnded link in Level 3 / Title of Level 4 */ + padding-left: 40px; + } + + /* Level 4 */ + + > ul > li > ul > li > ul > li > ul { + font-size: 13px; + font-family: $font-light; + } + + > ul > li > ul > li > ul > li > ul > li a { + padding-left: 60px; + } +} + +.side-title { + text-transform: uppercase; +} + +/* Article Styles */ + +article { + font-size: 20px; + line-height: 26px; + position: relative; + + b, + strong { + font-weight: 600; + } + + h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; + max-width: 1200px; + + a { + cursor: pointer; + color: $text-primary-color; + } + } + + h1, .h1 { + margin-top: 40px; + margin-bottom: 40px; + } + + h2, .h2 { + margin-top: 40px; + margin-bottom: 24px; + } + + h3, .h3 { + margin-top: 40px; + margin-bottom: 8px; + } + + &.api-reference .editor h3 { + margin: 0; + font-size: 22px; + line-height: 1em; + font-weight: 400; + letter-spacing: -0.02em; + } + + h4, .h4 { + margin-top: 24px; + margin-bottom: 8px; + } + + h5, .h5 { + margin-top: 24px; + margin-bottom: 8px; + } + + p { + max-width: 1200px; + font-size: 20px; + line-height: 26px; + margin-top: 8px; + margin-bottom: 8px; + + a:hover, + a:focus { + text-decoration: none; + } + + &.run-code { + margin-top: -5px; + margin-bottom: 40px; + } + } + + li { + font-size: 20px; + } + + &:not(.api-reference) > p:first-child, + &:not(.api-reference) h1 + p { + font-size: 22px; + line-height: 26px; + font-weight: $fw-normal; + font-family: $font-regular; + margin-top: 16px; + margin-bottom: 16px; + } + + h3 + p, + .h3 + p, + h4 + p, + .h4 + p { + margin-top: 0; + } + + ul, ol { + max-width: 1200px; + margin: 8px 22px; + padding: 0 0 0 12px; + + &.k-tabstrip-items{ + margin: 1em 0; + } + + li { + margin-bottom: 3px; + position: relative; + } + + img { + margin: 0; + } + } + + &.api-reference ul, + ul.docs-tabstrip, + ul.k-reset, + ul.k-pager-numbers { + list-style: none; + } + + ul.list-unstyled li { + padding: 0; + + &:before { + content: none; + } + } + + img { + margin: 30px 0; + width: auto; + height: auto; + max-width: 100%; + } + + /* Article Table Styles */ + table { + width: 100%; + table-layout: fixed; + margin: 15px 0 20px; + word-break: break-word; + overflow-wrap: break-word; + + th { + color: #8a959f; + background-color: #fcfcfc; + border-bottom: 1px solid #e4e4e4; + font-size: 13px; + font-weight: normal; + text-transform: uppercase; + } + + th, + td { + padding: 5px 10px; + } + + tr:nth-child(odd) { + background-color: #fcfcfc; + } + } + + h4 { + em { + color: #8a959f; + font-style: normal; + padding: 0 5px; + } + + code { + font-size: 16px; + padding: 2px 5px 3px; + } + + &.example-title { + margin-top: 25px; + margin-bottom: 10px; + padding: 0; + text-transform: uppercase; + color: #000000; + font-size: 15px; + line-height: 1em; + letter-spacing: 0.02em; + font-weight: 500; + font-family: $font-heading; + } + } +} + +ul.mdash { + list-style: none; + + li { + padding-left: .3em; + position: relative; + + &:before { + content: ""; + position: absolute; + top: .7em; + left: -20px; + width: 14px; + height: 1px; + background-color: currentColor; + } + } +} + +blockquote { + border: 0; + margin: 20px 0; + min-height: 70px; + padding: 24px 80px; + background-color: $important-bg; + background-image: url(image_path("important-icon.svg")); + color: #fff; + background-repeat: no-repeat; + background-size: 48px; + background-position: center; + background-position-x: 16px; + background-position-y: 50%; + + &:not(.alert-note) a, + &:not(.alert-note) a:link { + color: #000000; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + color: #000000; + text-decoration: none !important; + } + } + + color: #000000; + + p:first-child, + ul:first-child, + ol:first-child { + margin-top: 0; + } + + p:last-child, + ul:last-child, + ol:last-child { + margin-bottom: 0; + } + + &.disclaimer { + background-color: #eaebec; + color: #4f5d6c; + + p:first-child { + color: #36393f; + } + } + + &.alert-note { + margin-top: 2em; + margin-bottom: 2em; + background-color: #eaebec; + color: #4f5d6c; + } + + &.important { + background-color: $important-bg; + background-image: url(image_path("important-icon.svg")); + } + + &.caution, + &.warning { + background-color: $caution-bg; + background-image: url(image_path("caution-icon.svg")); + } + + &.tip, + &.note { + background-color: $tip-bg; + background-image: url(image_path("tip-icon.svg")); + } +} + +/* Article TOC & Related Articles */ +$border-color: #d9d9d9; + +#stick-marker { + margin-top: 6px; +} + +.additional-content-column { + position: absolute; + right: 0; + top: 25px; + margin-right: 40px; + + .btn-action { + color: $btn-action-foreground; + background-color: $btn-action-background; + text-transform: uppercase; + padding: 10px 20px; + margin: 10px 0; + border: 1px solid $accent; + border-radius: 0; + font-size: 14px; + font-weight: 500; + + &:hover, + &:focus, + &:active { + color: $btn-action-active-color; + background-color: $btn-action-active; + } + } + + .btn-contact-support { + color: $btn-support-color; + background-color: $btn-support-bg; + border: 1px solid $btn-support-border; + border-radius: 30px; + padding: 5px 10px; + font-size: 16px; + margin: 10px 0; + display: block; + text-align: center; + + &:hover, + &:focus, + &:active { + border-color: $btn-support-border-hover; + } + } + + .btn-edit-article { + font-size: 16px; + position: relative; + padding-left: 20px; + + &::before { + content: ""; + position: absolute; + top: -2px; + left: -3px; + width: 20px; + height: 20px; + background: url(image_path("edit.svg")) no-repeat 50% 50%; + } + } + + .support-info-area { + margin-bottom: 50px; + } + + .additional-info-content { + padding-top: 10px; + font-size: 17px; + font-weight: 500; + color: $text-active-color; + } + + &.affix { + margin-top: 85px; + position: fixed; + top: 0; + z-index: 1015; + } + + &.empty { + display: none !important; + } +} + +.related-articles { + > ul > li > a { + font-weight: 500; + } +} + +.uppercase-clear { + text-transform: none !important; +} + +.article-toc, .related-articles, .feedback-ab { + font-size: 14px; + margin-bottom: 30px; + padding-left: 10px; + border-left: 1px solid $border-separator-color; + + .side-title { + padding-top: 10px; + font-size: 17px; + font-weight: 500; + color: $text-active-color; + } + + .layout-components &.affix-top { + position: relative; + top: 160px; + } + + &.empty { + display: none !important; + } + + ul { + margin: 10px 0 10px -15px; + + a { + display: block; + margin: 14px 0 5px; + border-left: 5px solid transparent; + line-height: 1em; + padding: 2px 0 2px 14px; + text-decoration: none; + transition: color .1s, border-color .1s; + color: $navigation-link-color; + + &:hover, + &:active, + &:focus { + background-color: transparent; + color: $accent; + } + } + } + + .anchor-h1, + .anchor-h2 { + font-family: $font-medium; + font-size: 14px; + } + + .anchor-h3 { + margin: 5px 0; + font-family: $font-light; + font-size: 14px; + padding-left: 30px; + } + + hr { + width: 25px; + margin-left: 0; + border-top-color: $border-color; + } + + .active a { + color: $text-active-color; + border-color: $accent; + font-weight: 500; + } + + a:active { + color: #36393f; + } +} + +.article-cta { + background-color: #ee5247; + background-image: linear-gradient(to left, rgba(238, 150, 111, 0), rgba(238, 150, 111, 0.5)), url(image_path("big-brand.png")); + background-position: 50% 50%; + color: #fff; + margin: 70px -90px -60px; + padding: 0 75px 60px; // 90 - gutter/2 + position: relative; + z-index: 2; + + h2 { + color: inherit; + + a:hover, + a:focus, + a:active { + color: #fff; + + &:after { + display: none; + } + } + } + + p:first-child { + margin-top: 0; + } + + .btn-cta { + color: inherit; + text-transform: uppercase; + border: 2px solid currentColor; + border-radius: 0; + + &:hover, + &:focus, + &:active { + color: #f1f1f1; + } + } +} + +.article-cta-bg { + background-color: $footer-bg; + display: block; + z-index: 1; + position: absolute; + left: -100vw; + bottom: 0; + width: 200vw; + height: 175px; +} + +/* Search Results */ + +#search-container { + .results-message { + border: none; + } + + .k-pager-numbers-wrap select.k-dropdown { + display: none; + } + + .k-pager-wrap { + background-color: transparent; + justify-content: space-between; + + .k-pager-info { + display: none; + } + } + + .k-pager-numbers-wrap { + display: inline-block; + } + + .k-pager-nav:nth-child(4) { + float: right; + } +} + +#results { + border-top: 1px solid #e4e4e4; + border-left: none; + border-right: none; + border-bottom: none; + + > div { + padding: 20px 0 0; + line-height: 1.3em; + } + + h2 { + margin-top: 0; + margin-bottom: 2px; + font-size: 24px; + font-weight: 400; + color: #2489d8 !important; + } + + p { + margin: 0; + font-size: 13px; + color: #7d8a98; + + a { + font-size: 13px; + } + } +} + +.go-back { + svg { + width: 12px; + height: 12px; + } + + path { + fill: $link-color; + } + + &:hover path { + fill: $link-hover-color; + } +} + +/* Pager Styles */ + +.site-pager { + text-align: center; + font-size: 15px; + border: none; + + .k-pager-nav.k-pager-first, + .k-pager-nav.k-pager-last { + display: none; + } + + .k-pager-numbers { + display: inline-block; + margin: 0; + padding: 0; + list-style: none; + } + + .k-pager-numbers li { + display: inline-block; + padding: 0; + } + + .k-pager-numbers li a, + .k-pager-numbers li span, + a.k-pager-nav { + display: block; + min-width: 20px; + height: 50px; + line-height: 50px; + margin-top: 10px; + margin-bottom: 10px; + padding-left: 20px; + padding-right: 20px; + vertical-align: middle; + color: #a2a2a4; + outline: none; + border: 1px solid transparent; + border-radius: 0; + } + + .k-pager-numbers li a:hover, + .k-pager-numbers li a:focus { + background-color: #eaebec; + color: #36393f; + } + + .k-pager-numbers li .k-state-selected { + border-color: #cacacb; + color: #36393f; + } + + li.k-current-page { + display: none; + } + + a.k-pager-nav { + padding-left: 10px; + padding-right: 10px; + border-color: #cacacb; + color: #36393f; + font-family: $font-regular; + border-radius: 0; + border: 0; + + &.k-state-disabled { + visibility: hidden; + } + + &:hover, + &:focus { + background-color: #eaebec; + color: #36393f; + } + } +} + +article table tr { + background-color: #f8f8f8; +} + +/* Search Popup */ + +#refine-search-popup { + font-size: 11px !important; + color: black; + border: none; + box-shadow: 3px 3px 19px rgba(0, 0, 0, 0.1); + min-width: 200px; + + ul { + margin: 0; + padding: 0; + background: #FFFFFF; + } + + li { + list-style: none; + + &:hover { + background-color: $accent; + color: #FFFFFF; + + .k-icon { + color: #FFFFFF; + } + } + + label { + padding: 15px; + cursor: pointer; + font-size: 12px; + } + + .k-icon { + color: $accent-solid; + } + } +} + +.custom-checkbox { + text-transform: uppercase; + display: block; + + input[type="checkbox"] { + display: none; + + &:checked ~ span.k-icon { + opacity: 1; + } + } + + span.k-icon { + opacity: 0; + } + + .k-icon { + margin-right: 8px; + font-size: 13px; + } +} + +.search-input-container { + position: relative; + padding: 0 2px 2px 2px; +} + +#refine-search-container { + white-space: nowrap; + position: absolute; + top: 0; + right: 0; + height: 50px; +} + +#refine-search-button { + text-transform: uppercase; + color: black; + cursor: pointer; + padding: 7px; + line-height: 36px; + + .k-icon { + margin-left: 10px; + margin-right: 10px; + vertical-align: middle; + } +} + +#refine-search-label { + font-size: 13px; + vertical-align: middle; +} + +.unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#page-search { + margin: 0; + width: 100%; + background-color: transparent; + padding: 0; + right: 435px; + text-align: right; + max-width: 930px; + + > div { + text-align: left; + display: inline-block; + width: 100%; + } + + form { + margin-bottom: 0; + box-shadow: 3px 3px 19px rgba(0, 0, 0, 0.1); + } + + table { + margin: 0; + padding: 0; + border: none; + + td { + border: none; + } + } + + input { + width: 100%; + height: 39px; + padding-left: 40px; + padding-right: 15px; + border: 0; + font-size: 19px; + font-family: $font-light; + outline: none; + background-image: url(image_path("search.svg")); + background-repeat: no-repeat; + background-position: 10px 50%; + background-size: 16px; + background-color: transparent; + } + + &.search-visibility { + display: block; + } +} + +#search-container { + input { + width: 100%; + height: 50px; + padding-left: 45px; + padding-right: 15px; + border: 1px solid #fff; + font-size: 19px; + font-family: $font-light; + outline: none; + color: #36393f; + background: url(image_path("search.svg")) #fff no-repeat 10px 50%; + transition: border-color .2s, box-shadow .2s; + } +} + +.toggle-nav, +.show-search { + display: none; + cursor: pointer; +} + +.nav.nav-visibility { + display: block; +} + +.k-tabstrip { + border: 1px solid #ccc; + outline: none; + + .k-link { + padding: 0; + } + + .k-content, + .k-loading { + border: 0; + } + + .k-tabstrip-items { + padding: 0; + border-bottom: 1px solid; + } + + .k-item { + border-width: 0 1px 0 0; + border-style: solid; + font-weight: bold; + font-size: 14px; + padding: .72em 1.5em; + cursor: pointer; + transition-property: background-color, color; + transition-duration: 0.2s; + transition-timing-function: ease; + } + + .k-content pre { + border: 0; + padding: 0; + margin: 1em 0; + } +} + +.toc-prev-next { + float: right; + + a { + display: inline-block; + color: #898c92; + margin: -2px 0; + padding: 2px 15px 2px 10px; + font-size: 10px; + letter-spacing: 0.04em; + text-transform: uppercase; + font-family: $font-medium; + box-shadow: none; + } + + .read-next { + border-left: 1px solid #353c43; + padding: 2px 5px 2px 15px; + } + + svg { + width: 13px; + height: 13px; + vertical-align: middle; + margin: -1px 3px 0; + } + + path { + fill: #fff; + } +} + +.title-prev, .title-next { + display: none; + transition: display .2s; +} + +/* Feedback Styles */ + +@media screen and (min-width: 768px){ + .feedback-more-info.show { + flex: 0 0 79.1667%; + max-width: 79.1667%; + margin-left: 20.8333%; + padding-left: 16px + } +} + +@media screen and (min-width: 576px){ + .feedback-more-info.show { + flex: 0 0 100%; + max-width: 100%; + margin-left: 0%; + } +} + +.feedback-more-info { + width: 100%; + flex: 0 0 100%; + max-width: 100%; + margin-left: 0%; + max-height: 0; + overflow: hidden; + padding-left: 35px; + padding-right: 16px; + + &.show { + display: block; + transition: max-height 0.2s ease-out; + max-height: 240px; + padding-bottom: 10px; + } + + &.hide { + max-height: 50px; + overflow: hidden; + transition: max-height 0.2s ease-out; + } + + .feedback-other-text-input { + color: #000000; + font-size: 16px; + font-weight: 400; + margin: 10px 0; + padding: 10px; + width: 100%; + max-width: 100%; + min-width: 100%; + height: 120px; + + &:focus { + outline: none; + } + } + + .feedback-skip-button { + display: inline-block; + border-radius: 2px; + text-align: center; + cursor: pointer; + text-decoration: none; + border-width: 2px; + border-style: solid; + transition: color .2s ease, background-color .2s ease, border-color .2s ease; + padding: 5px 24px; + font-weight: 400; + font-size: 19px; + line-height: 32px; + margin-left: 15px; + text-transform: none; + background-color: transparent; + border-color: #C1E8FF; + color: #000; + + &:hover { + cursor: pointer; + border-color: #94D7FF; + } + } + + .feedback-ab-submit-button { + padding: 6px 12px; + margin: 0; + background-color: $accent; + border: 1px solid #FFFFFF; + color: #FFFFFF; + font-size: 14px; + font-weight: 400; + text-transform: none; + + &:hover, + &:active, + &:focus { + background-color: rgba(255, 255, 255, 0.2); + } + } +} + +.feedback-row { + background-image: url(image_path("feedback-bgr.svg")); + background-size: cover; + background-repeat: repeat-x; + font-size: 19px; + font-weight: 500; + z-index: 1100; + + .feedback-question>div{ + display: flex; + padding: 10px 0px; + align-items: center; + flex-wrap: nowrap; + justify-content: center; + } + + @media screen and (max-width: 768px) + { + .feedback-question>div { + flex-wrap: nowrap; + justify-content: space-between; + } + } + + .feedback-button { + display: inline-block; + border-radius: 2px; + text-align: center; + cursor: pointer; + text-decoration: none; + border-width: 2px; + border-style: solid; + transition: color .2s ease, background-color .2s ease, border-color .2s ease; + } + + .feedback-send-data-button { + display: inline-flex; + align-items: center; + justify-content: center; + outline: none; + cursor: pointer; + user-select: none; + border-radius: 2px; + font-weight: 500; + font-size: 19px; + padding: 9px 14px; + line-height: 12px; + min-width: 60px; + } + + + .feedback-button-secondary { + background-color: #2E64D6; + color: #fff; + border-color: transparent; + } + + .feedback-button-secondary:hover { + background-color: #2456BE; + color: #fff; + } + + .feedback-vote-buttons{ + display: flex; + } + + @media screen and (min-width: 768px){ + .feedback-vote-buttons{ + margin-top: 0px; + } + } + + @media screen and (max-width: 380px){ + .feedback-question > div{ + padding-top: 5px; + padding-bottom: 5px; + } + .feedback-vote-buttons{ + flex-wrap: wrap; + row-gap: 5px; + } + } + + .feedback-vote-button { + display: flex; + align-items: center; + justify-content: center; + outline: none; + cursor: pointer; + user-select: none; + border: 0px; + border-radius: 2px; + font-weight: 500; + color: white; + background-color: rgb(46, 100, 214); + font-size: 19px; + padding: 9px 14px; + line-height: 12px; + min-width: 60px; + + &:hover { + background-color: #2456BE; + color: #fff; + } + } + + .close-button-container { + display: none; + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); + background: none; + outline: none; + border: 0px; + + &:hover { + cursor: pointer; + } + } + + &.vote-disabled { + display: none; + } + + &.vote-hide { + animation-name: hideFeedback; + animation-duration: 0.2s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + } + + @keyframes hideFeedback { + from { + opacity: 1; + } + + to { + opacity: 0; + } + } + + &.feedback-fixed { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + margin: 0; + z-index: 1100; + background-color: #e7ebf5; + + .close-button-container { + display: block; + } + } + + h3 { + font-weight: 500; + font-size: 26px; + line-height: 1; + display: inline-block; + color: rgb(31, 31, 31) !important; + margin-top: 0px; + margin-bottom: 0px; + width: 100%; + text-align: center; + } + + @media screen and (min-width: 768px){ + h3{ + text-align: left; + } + } + + h4 { + color: #1f1f1f !important; + } + + button { + display: inline-block; + text-decoration: none; + text-transform: uppercase; + background: transparent; + border: none; + color: $feedback-button-foreground; + cursor: pointer; + transition-property: background-color, color; + transition-duration: 0.2s; + transition-timing-function: ease; + + &:hover, + &:focus, + &:active, + &:visited { + color: $feedback-foreground; + outline: none; + } + } + + .feedback > div { + line-height: 23px; + } + + .feedback > div.side-title{ + line-height: 50px; + font-size: 26px; + } + + @media screen and (max-width: 384px){ + .feedback > div.side-title { + line-height: 30px; + } + } + + @media screen and (max-width: 768px){ + .feedback > div.side-title { + text-align: center; + } + } +} + +.button-close { + position: absolute; + top: 12px; + right: 12px; + border: 0; + width: 32px; + height: 32px; + background: url(image_path("close.svg")) no-repeat 50% 50%; +} + +.button-close span { + display: none; +} + +.button-close:focus { + outline: none; +} + +/* Prev Next Styles */ + +.prev-next { + margin-left: 0; + margin-right: 0; + border-top: 1px solid #e4e4e4; + + a { + display: block; + margin-left: -15px; + padding-left: 20px; + text-decoration: none; + color: $link-color; /*#6de3c2 $accent*/ + fill: $link-color; + font-size: 21px; + line-height: .9em; + font-family: $font-medium; + } + + a span { + display: block; + margin-top: 5px; + color: #36393f; + font-size: 13px; + line-height: 15px; + font-family: $font-regular; + } + + a:hover, a:focus, a:active, + a:hover span, a:focus span, a:active span { + color: $link-hover-color; + fill: $link-hover-color; + } + + a:hover span, a:focus span, a:active span { + text-decoration: underline; + } + + svg { + width: 16px; + height: 16px; + margin-left: -20px; + vertical-align: baseline; + } + + .next { + float: right; + text-align: right; + } + + .next a { + margin-left: 0; + margin-right: -15px; + padding-left: 0; + padding-right: 20px; + } + + .next svg { + margin-left: 0; + margin-right: -20px; + } +} + +/* Temp styles */ +[data-code-language] { + position: relative; + + &::after { + content: attr(data-code-language); + font-family: $font-regular; + position: absolute; + display: block; + top: 5px; + right: 11px; + height: 31px; + line-height: 31px; + vertical-align: middle; + padding: 0 6px 0 0; + text-align: right; + color: #8a959f; + text-shadow: -2px -2px 0 #fefefe, 2px -2px 0 #fefefe, -2px 2px 0 #fefefe, 2px 2px 0 #fefefe; + font-size: 11px; + letter-spacing: 0.04em; + } +} + +.tab-content { + min-height: 30px; + margin: 15px 0 30px; +} + +.snippet-runner { + width: 100%; + height: 260px; + background-color: #fff; + box-shadow: inset 0 0 0 1px #ececec; + + .pane-preview & { + box-shadow: none; + background-color: transparent; + } +} + +/* List of Components */ + +.components { + border-bottom: 1px solid #e4e4e4; +} + +.components-tabstrip { + & a { + font-size: 14px; + } + + li { + &, &.active { + border: none; + } + + &::after { + content: ''; + display: block; + background-color: $accent; + width: 100%; + transform: scaleX(0.4); + transition: transform .25s ease-in-out; + height: 0; + } + + &:hover::after { + height: 1px; + transform: scaleX(0.4); + } + + &.active::after { + height: 2px; + transform: scaleX(1); + } + } +} + +@keyframes showTab { + from { + opacity: 0.1; + transform: translateX(-2%); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +#r-components, #r-wrappers { + &.tab-pane { + animation: showTab 0.25s ease-in-out 0s; + } +} + +.component-item { + position: relative; + padding-left: 36px; + + .highlights & { + h2 { + font-size: 2.5em; + } + + .component-icon { + top: 9px; + } + } + + h2 { + font-size: 1.6em; + font-weight: 400; + + > a { + display: block; + text-overflow: ellipsis; + overflow: hidden; + } + } + + p { + font-size: 13px; + line-height: 1.3em; + color: #7d8a98; + } + + ul, ol { + margin-bottom: 0; + } + + .list-unstyled { + line-height: 16px; + } + + .list-unstyled li { + padding: 6px 0 2px; + } +} + +.component-icon { + display: block; + position: absolute; + top: 2px; + left: 0; + width: 24px; + height: 24px; + + /*background: url(image_path('icon-placeholder.svg')) no-repeat 0 50%;*/ + + > svg { + width: 24px; + height: auto; + vertical-align: top; + + > path { + fill: $accent; + } + } +} + +/* Homepage styles (live demo) */ + +$callout-bg: #d7dfe3; + +.demo-embed { + h4, + .run-code, + pre { + display: none; + } + + .runner iframe { + background-color: transparent; + box-shadow: none; + } +} + +#demo-info-link { + padding-left: 1.4em; + padding-right: 1.4em; +} + +.live-samples .callout-tabs { + list-style-type: none; + margin: 0; + padding: 0; + position: relative; + + li { + display: inline-block; + border: 1px solid #dedede; + border-width: 1px 0; + margin-top: -1px; + } + + h4 { + text-transform: uppercase; + clear: both; + color: #2f8eb8; + line-height: 2em; + margin: 0; + padding: 0 .5em; + cursor: pointer; + font-size: 18px; + font-family: Roboto,Arial,Helvetica,sans-serif; + font-weight: 400; + + &:hover { + color: #006a88; + } + } + + div { + display: none; + padding: .5em; + font-size: 16px; + margin: 0; + } + + .active { + background-color: $callout-bg; + + h4 { + color: #000; + cursor: default; + } + } +} + +// md size +@media (min-width: 992px) { + .SiteRibbon { + font-size: 20px; + } + + .live-samples .callout-tabs { + &::after { + display: none; + } + + li { + display: block; + position: relative; + padding: 10px 20px; + + // callout + &::before { + position: absolute; + content: ""; + display: block; + width: 0; + height: 0; + border-style: solid; + border-width: 0 0 28px 28px; + border-color: transparent transparent fade-out($callout-bg, 1); + left: 0; + top: 7px; + z-index: 0; + transition: all .1s 0s; + } + + // background + &::after { + position: absolute; + content: ""; + left: 20px; + right: 20px; + top: 20px; + bottom: 20px; + z-index: 0; + background-color: fade-out($callout-bg, 1); + transition: all .2s .1s; + } + } + + h4 { + line-height: 48px; + } + + h4, div { + position: relative; + z-index: 1; + top: 0; + left: 0; + padding: 0; + } + + div { + display: block; + overflow: hidden; + max-height: 0; + transition: max-height 0 .5s; + } + + .active { + background-color: transparent; + + &::before { + left: -28px; + border-color: transparent transparent $callout-bg; + transition: all .5s .2s; + } + + &::after { + background-color: $callout-bg; + left: 0; + right: 0; + top: 0; + bottom: 0; + transition: all .2s 0s; + } + + div { + max-height: 300px; + } + } + } +} + +/* Global Search */ + +.global-search { + display: block; + right: 30px; + overflow: hidden; + margin-left: 15px; + transition: left .2s; + + &.show-search { + left: -10%; + } + + .scroll & { + top: 8px; + } + + input { + width: 100%; + height: 48px; + padding-left: 40px; + padding-right: 15px; + border-radius: 2px; + border: 1px solid transparent; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); + font: 300 22px/26px Metric,Arial,sans-serif; + outline: 0; + color: #555555; + background-image: url(image_path("search.svg")); + background-repeat: no-repeat; + background-position: 10px 50%; + background-size: 16px; + background-color: transparent; + transition: border-color .2s, box-shadow .2s; + + &:hover { + border: 1px solid #2D2DB2; + font-weight: 400; + color: #000; + transition: border 200ms ease-in; + } + + &:focus { + border: 1px solid #2D2DB2; + font-weight: 400; + color: #000; + transition: border 200ms ease-in; + } + } + + #refine-search-container { + height: 39px; + } + + #refine-search-button { + line-height: 30px; + font-size: 16px; + } +} + +.local-search { + input { + width: 100%; + height: 50px; + padding-left: 45px; + padding-right: 15px; + border: 1px solid #fff; + font-size: 19px; + font-family: $font-light; + outline: none; + color: #36393f; + background: url(image_path("search.svg")) #fff no-repeat 10px 50%; + transition: border-color .2s, box-shadow .2s; + box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.05); + + &:hover { + box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.1); + } + + &:focus { + border-color: #d9d9d9; + } + } +} + +.button { + display: inline-block; + min-width: 120px; + height: 50px; + line-height: 48px; + padding-left: 20px; + padding-right: 20px; + color: #fff; + background-color: #0081a6; + vertical-align: middle; + text-align: center; + font-size: 15px; + font-family: $font-heading; + border: 1px solid transparent; + outline: none; + transition: background-color 0.2s; + + &.small { + min-width: 40px; + height: 36px; + line-height: 34px; + padding-left: 20px; + padding-right: 20px; + } + + &:hover, + &:focus, + &:active { + color: #fff; + background-color: $link-hover-color; + text-decoration: none; + } + + &.ghost { + font-size: 16px; + color: #36393f; + background-color: transparent; + border-color: #cacacb; + + &:hover, + &:focus { + color: #36393f; + background-color: #eaebec; + } + } + + &.secondary { + color: #324359; + background-color: #afe0f4; + text-transform: uppercase; + font-weight: 500; + letter-spacing: 1px; + + &:hover, + &:focus { + background-color: #8ed7f5; + } + } + + article & { + min-width: 60px; + height: 36px; + line-height: 33px; + padding-left: 15px; + padding-right: 15px; + } +} + +a.all-components { + float: left; + position: relative; + cursor: pointer; + font-size: 16px; + font-family: $font-regular; + text-align: left; + color: #333; + padding: 1px 40px 0 !important; + padding-left: 15px; + margin-left: 15px; + margin-right: 10px; + background-color: #fff; + background-image: url(image_path("article-menu.svg")); + background-repeat: no-repeat; + background-position: left 11px top 50%; + + &.button { + min-width: 42px; + height: 35px; + } + + &:active, + &:hover, + &:focus { + background-color: #eaebec; + color: #333; + } + + &::after { + content: " "; + background-color: transparent !important; + } + + .scroll & { + box-shadow: none; + margin-right: 0; + } +} + +span.all-components-expanded-icon { + position: absolute; + top: 10px; + left: 80px; + background-image: url(image_path("group-expand-collapse.svg")); + background-repeat: no-repeat; +} + +.col-xl-8, .col-xl-10 { + position: relative; + padding-left: 15px; + padding-right: 15px; +} + +/* API Pages */ + +.api-reference { + h1 { + word-break: break-word; + } + + h1 + p { + margin-top: 30px; + } + + h2 { + margin-top: 10px; + margin-bottom: 10px; + font-size: 26px; + font-weight: 400; + word-break: break-word; + } + + h3 { + margin-top: 20px; + margin-bottom: 2px; + font-size: 20px; + font-weight: 500; + word-break: break-word; + } + + h3, + h4, + h4 ~ p { + code, + .code { + background-color: $code-background-color; + color: #ffffff; + margin-top: 3px; + padding: 3px 4px; + font-size: 13px; + line-height: 10px; + + a:hover, + a:focus, + a:active { + color: #fff; + + &::after { + display: none; + } + } + } + } + + h4 { + font-size: 11px; + line-height: 1.231em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-top: 20px; + margin-bottom: 0px; + + a { + color: #4f5d6c; + } + } + + h5 { + text-transform: none; + margin-top: 10px; + margin-bottom: 0; + font-size: 15px; + letter-spacing: 0; + font-family: $font-heading; + + code, + .code { + background-color: $code-background-color; + color: #ffffff; + padding: 1px 3px 2px; + font-size: 13px; + font-weight: 400; + } + } + + h4, + h5, + h4 + p, + h5 + p { + padding-left: 20px; + } + + h4 + p, + h5 + p { + font-size: 14px; + } + + p { + margin-top: 0; + margin-bottom: 5px; + + br { + display: none; + } + + br + br { + display: initial; + } + } +} + +/* Icon Card List Styles */ + +.separator-bottom { + border-bottom: 1px solid #e4e4e4; +} + +.card-list-info { + padding: 30px 0; +} + +.card-list { + list-style-type: none; + margin: 30px 0; + padding: 0; + line-height: 1.4em; + + li { + box-sizing: border-box; + vertical-align: top; + margin: 0; + padding: 0; + text-align: center; + transition: .3s all ease; + + a { + display: block; + margin: 0; + padding: 30px 0 40px; + text-decoration: none; + color: #3f4d5c; + transition: .3s all ease; + } + + p { + margin: 5px 0 0 0; + font-size: 1.25em; + } + + &:hover { + background-color: #fff; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 3px 15px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.04); + position: relative; + z-index: 1; + + a { + color: $accent; + } + } + + &:before { + display: none; + } + } + + svg { + max-width: 70px; + + path { + fill: url(#gradient); + } + } +} + +/* Media Queries */ +/* ####################################################################################################### */ + +@media (max-width: 767px) { + .global-search { + position: absolute; + left: 100px; + } + + #refine-search-label { + display: none; + } + + article { + font-size: 16px; + line-height: 24px; + + h1, .h1 { + font-size: 40px; + font-weight: $fw-semibold; + line-height: 36px; + word-break: break-word; + } + + h2, .h2 { + font-size: 30px; + font-weight: $fw-semibold; + line-height: 30px; + } + + h3, .h3 { + font-size: 28px; + font-weight: $fw-normal; + line-height: 26px; + } + + h4, .h4 { + font-size: 19px; + font-weight: $fw-bold; + line-height: 21px; + } + + h5, .h5 { + font-size: 13px; + line-height: 1.231em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + } + + &:not(.api-reference) > p:first-child, + &:not(.api-reference) h1 + p { + font-size: 16px; + line-height: 20px; + font-weight: $fw-normal; + font-family: $font-regular; + } + } +} + + +@media (min-width: 768px) and (max-width: 1440px) { + article { + h1, .h1 { + font-size: 50px; + font-weight: $fw-semibold; + line-height: 42px; + word-break: break-word; + } + + h2, .h2 { + font-size: 40px; + font-weight: $fw-semibold; + line-height: 40px; + } + + h3, .h3 { + font-size: 30px; + font-weight: $fw-normal; + line-height: 28px; + } + + h4, .h4 { + font-size: 21px; + font-weight: $fw-bold; + line-height: 24px; + } + + h5, .h5 { + font-size: 13px; + line-height: 1.231em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + } + + &:not(.api-reference) > p:first-child, + &:not(.api-reference) h1 + p { + font-size: 18px; + line-height: 22px; + font-weight: $fw-normal; + font-family: $font-regular; + } +} +} + +@media (max-width: 1444px) { + .feedback-ab { + .feedback-ab-submit-button-container { + width: 30%; + } + } +} + +/* Overrides the default which is from width 1240px, because to match our side-navigation behavior. */ +@media only screen and (min-width: 768px) { + nav.TK-Nav { + position: sticky; + position: -webkit-sticky; + top: 0; + transform: translateZ(0); + -webkit-transform: translateZ(0); + } + + .SiteRibbon { + position: sticky; + + + .PRGS-PairNav { + top: 64px; + } + } +} + +@media (min-width: 768px) { /* Styles for width >= 768px */ + span.all-components-expanded-icon { + display: none; + } + + #navbar { + select { + display: none; + } + + .scroll & { + display: none; + } + + .main-menu { + float: right; + position: relative; + display: inline-block; + } + + a { + font-size: 12px; + padding: 0px 7px 0; + } + + .navbar-brand { + display: none; + } + } + + .navbar-header { + position: absolute; + } + + .navbar-fixed-top { + padding: 0 15px; + } + + .all-components { + display: none; + } + + .side-nav { + display: block; + padding-bottom: 40px; + position: fixed; + + &.affix { + position: fixed; + } + + &.show-components { + border-left-width: 1px; + border-right-width: 1px; + top: 0px !important; + + .side-title { + padding-left: 30px; + } + + > ul > li.expanded { + &::before, + &::after { + left: 30px; + } + } + + > ul > li > ul > li > ul > li a, + > ul > li > ul > li > ul > li.expanded > a { /* Exapnded link in Level 3 / Title of Level 4 */ + padding-left: 40px; + } + + > ul > li > ul > li > ul > li > ul > li a { + padding-left: 60px; + } + } + } + + a.k-pager-nav { + float: left; + } + + .k-pager-numbers + a.k-pager-nav { + float: right; + } + + .version-picker { + float: right; + text-align: right; + margin-top: -21px !important; + } + + .copyright { + text-align: left; + } + + .social-icons { + text-align: right; + } + + article { + ul, ol { + padding: 0 0 0 12px; + } + } + + .api-index.api-columns ul { + column-count: 2; + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1025px) { /* Styles for width > 1024px */ + #navbar { + a { + font-size: 13px; + padding: 1px 10px 0; + } + + .navbar-brand { + margin-left: 31%; + width: 160px; + display: block; + + .scroll & { + width: 230px; + background-position: 0 8px; + margin-left: 0; + + a { + font-size: 15px; + } + } + } + } + + .component-item { + .highlights & { + h2 { + font-size: 2em; + } + } + } + + /* Package Components Overview List */ + .components-overview-list { + a { + min-height: 190px; + } + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1199px) { /* Styles for width > 1199px */ + .component-item { + padding-left: 0; + padding-top: 36px; + + .highlights & { + h2 { + font-size: 1.6em; + } + + .component-icon { + top: 0; + } + } + } + + .component-icon { + top: 0px; + + > svg { + vertical-align: bottom; + } + } + + .nav-container { + .scroll & { + width: 100%; + margin-left: 0; + } + } + + #navbar { + .navbar-brand { + width: 220px; + margin-left: 8.33%; + } + + a { + font-size: 15px; + } + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1441px) { /* Styles for width > 1440px */ + .feedback-ab { + .vote-buttons-container { + width: 33%; + } + } + + .side-nav { + font-size: 16px; + + ul { + font-size: 16px; + } + + #page-tree > .k-group > .k-item, + #page-tree-api > .k-group > .k-item { + > div { + .k-in, span > a { + font-weight: 500; + font-size: 16px; + } + } + } + } + + .components { + font-size: 16px; + } + + .article-toc, .related-articles, .feedback-ab { + .anchor-h1, + .anchor-h2 { + font-family: $font-medium; + font-size: 16px; + } + } + + .article-toc, .feedback-ab { + .layout-components &.affix-top { + top: 170px; + } + } + + .feedback-ab ~ .article-toc { + .layout-components &.affix-top { + top: 270px; + } + } + + .api-index.api-columns ul { + column-count: 3; + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1601px) { /* Styles for width > 1600px */ + #navbar { + a { + font-size: 12px; + padding: 1px 7px 0; + } + + .main-menu { + margin-right: -8px; + } + } + + .navbar > .container-fluid .navbar-brand { + margin-left: -7px; + } + + .nav-container { + width: 83.33333333%; + margin-left: 8.33333333%; + + .scroll & { + width: 83.33333333%; + margin-left: 8.33333333%; + } + } + + #navbar { + .navbar-brand { + width: 220px; + margin-left: 0; + + .scroll & { + margin-left: 0; + } + } + } + + .global-search { + right: 90px; + } + + .col-xl-offset-0 { + margin-left: 0; + } + + .col-xl-offset-1 { + margin-left: 8.33333333%; + } + + .col-xl-offset-2 { + margin-left: 16.66666667%; + } + + .col-xl-8 { + width: 66.66666667%; + float: left; + } + + .col-xl-10 { + width: 83.33333333%; + float: left; + } + + .component-item { + padding-left: 36px; + padding-top: 0; + + .highlights & { + h2 { + font-size: 2.5em; + } + + .component-icon { + top: 9px; + } + } + } + + .component-icon { + top: 2px; + + > svg { + vertical-align: top; + } + } +} + +/* ####################################################################################################### */ + +@media (min-width: 1801px) { /* Styles for width > 1800px */ + #navbar { + a { + font-size: 15px; + padding: 1px 10px 0; + } + } + + .global-search { + right: 100px; + } + + body, + article, + blockquote, + #results > div { + font-size: 16px; + } +} + +@media (min-width: 1200px) { + .auto-clear .col-lg-1:nth-child(12n+1) { + clear: left; + } + + .auto-clear .col-lg-2:nth-child(6n+1) { + clear: left; + } + + .auto-clear .col-lg-3:nth-child(4n+1) { + clear: left; + } + + .auto-clear .col-lg-4:nth-child(3n+1) { + clear: left; + } + + .auto-clear .col-lg-6:nth-child(odd) { + clear: left; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .auto-clear .col-md-1:nth-child(12n+1) { + clear: left; + } + + .auto-clear .col-md-2:nth-child(6n+1) { + clear: left; + } + + .auto-clear .col-md-3:nth-child(4n+1) { + clear: left; + } + + .auto-clear .col-md-4:nth-child(3n+1) { + clear: left; + } + + .auto-clear .col-md-6:nth-child(odd) { + clear: left; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .auto-clear .col-sm-1:nth-child(12n+1) { + clear: left; + } + + .auto-clear .col-sm-2:nth-child(6n+1) { + clear: left; + } + + .auto-clear .col-sm-3:nth-child(4n+1) { + clear: left; + } + + .auto-clear .col-sm-4:nth-child(3n+1) { + clear: left; + } + + .auto-clear .col-sm-6:nth-child(odd) { + clear: left; + } +} + +@media (max-width: 767px) { + .auto-clear .col-xs-1:nth-child(12n+1) { + clear: left; + } + + .auto-clear .col-xs-2:nth-child(6n+1) { + clear: left; + } + + .auto-clear .col-xs-3:nth-child(4n+1) { + clear: left; + } + + .auto-clear .col-xs-4:nth-child(3n+1) { + clear: left; + } + + .auto-clear .col-xs-6:nth-child(odd) { + clear: left; + } +} + +/* Modificators */ + +.mt-0 { + margin-top: 0px !important; +} + +.mt-5 { + margin-top: 5px !important; +} + +.mt-10 { + margin-top: 10px !important; +} + +.mt-20 { + margin-top: 20px !important; +} + +.mt-30 { + margin-top: 30px !important; +} + +.mt-40 { + margin-top: 40px !important; +} + +.mt-50 { + margin-top: 50px !important; +} + +.mt-60 { + margin-top: 60px !important; +} + +.mt-70 { + margin-top: 70px !important; +} + +.mt-80 { + margin-top: 80px !important; +} + +.mt-90 { + margin-top: 90px !important; +} + +.mt-100 { + margin-top: 100px !important; +} + +.mb-0 { + margin-bottom: 0px !important; +} + +.mb-5 { + margin-bottom: 5px !important; +} + +.mb-10 { + margin-bottom: 10px !important; +} + +.mb-20 { + margin-bottom: 20px !important; +} + +.mb-30 { + margin-bottom: 30px !important; +} + +.mb-40 { + margin-bottom: 40px !important; +} + +.mb-50 { + margin-bottom: 50px !important; +} + +.mb-60 { + margin-bottom: 60px !important; +} + +.mb-70 { + margin-bottom: 70px !important; +} + +.mb-80 { + margin-bottom: 80px !important; +} + +.mb-90 { + margin-bottom: 90px !important; +} + +.mb-100 { + margin-bottom: 100px !important; +} + +.pt-0 { + padding-top: 0px !important; +} + +.pt-5 { + padding-top: 5px !important; +} + +.pt-10 { + padding-top: 10px !important; +} + +.pt-20 { + padding-top: 20px !important; +} + +.pt-30 { + padding-top: 30px !important; +} + +.pt-40 { + padding-top: 40px !important; +} + +.pt-50 { + padding-top: 50px !important; +} + +.pt-60 { + padding-top: 60px !important; +} + +.pt-70 { + padding-top: 70px !important; +} + +.pt-80 { + padding-top: 80px !important; +} + +.pt-90 { + padding-top: 90px !important; +} + +.pt-100 { + padding-top: 100px !important; +} + +.pb-0 { + padding-bottom: 0px !important; +} + +.pb-5 { + padding-bottom: 5px !important; +} + +.pb-10 { + padding-bottom: 10px !important; +} + +.pb-20 { + padding-bottom: 20px !important; +} + +.pb-30 { + padding-bottom: 30px !important; +} + +.pb-40 { + padding-bottom: 40px !important; +} + +.pb-50 { + padding-bottom: 50px !important; +} + +.pb-60 { + padding-bottom: 60px !important; +} + +.pb-70 { + padding-bottom: 70px !important; +} + +.pb-80 { + padding-bottom: 80px !important; +} + +.pb-90 { + padding-bottom: 90px !important; +} + +.pb-100 { + padding-bottom: 100px !important; +} + +.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, +.col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, +.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, +.col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { + min-height: 0; +} + +.k-loading-mask { /* stop search results from "jumping" */ + display: none; +} + +.coming-soon { + opacity: 0.5; + cursor: default; + + a, + h2 > a:hover, + h2 > a:active { + cursor: default; + color: inherit; + } +} + +pre { + margin: 5px 0 20px; + padding: 15px; + overflow: auto; + background-color: #f8f8f8; + border: 1px solid #ececec; + border-radius: 0; + -webkit-transform: translateZ(0); + + &.preview, + &.preview + pre, + &.preview + pre + pre { + display: none; + + .no-js &, + &[data-code-language] { + display: block; + } + } + + &:hover .copy-btn { + display: block; + } + + &.language-html, + &.language-jsx { + margin: 0 0 10px; + border-radius: 0; + background-color: #fff; + border: 1px solid #ececec; + clear: both; + } + + .file-list & { + padding: 0; + } +} + +.copy-btn { + position: absolute; + top: 6px; + right: 4px; + z-index: 2; + color: $link-color; + display: none; + border-width: 0; + border-radius: 0; + font-family: $font-regular; + font-size: 13px; + line-height: 1.2; + padding-left: 25px; + text-transform: uppercase; + background: #fff url(image_path("copy.svg")) no-repeat 5px 50%; + + &:hover, + &:active, + &:focus { + color: $link-color; + outline: 0; + background: #fff url(image_path("copy.svg")) no-repeat 5px 50%; + box-shadow: none; + } + + &:active:focus { + color: $link-hover-color; + outline: 0; + } + + .file-list & { + right: 0; + padding-right: 0; + } +} + +code { + display: inline-block; + margin: 0 1px; + padding: 0 5px 0 4px; + color: inherit; + word-break: normal; + background-color: #ededed; + font-family: inherit; + font-size: 90%; + line-height: 1.40em; + letter-spacing: 0; + text-transform: none; + border: 0; + border-radius: 0; + + a & { + color: $accent; + } + + a:hover &, + a:focus &, + a:active & { + color: $link-hover-color; + text-decoration: underline; + } + + blockquote & { + color: $link-color; + } + + blockquote { + a & { + color: $accent; + } + + a:hover &, + a:focus &, + a:active & { + text-decoration: none; + } + } + + pre & { + font-family: $font-code; + font-size: 12px; + line-height: 1.3; + box-shadow: none; + } +} + +.api-index { + padding-top: 60px; + padding-bottom: 60px !important; + + li { + overflow: hidden; + text-overflow: ellipsis; + } + + &.api-columns .col-xs-w { + width: 100% !important; + } +} + +.symbol { + width: 24px; + height: 24px; + text-indent: -1px; + border: 2px solid currentColor; + text-align: center; + line-height: 19px; + letter-spacing: normal; + font-size: 13px; + font-weight: 900; + top: -2px; + left: -34px; + + &::after { + content: ""; + display: block; + height: 5px; + width: 5px; + position: absolute; + bottom: -2px; + right: -2px; + background-color: #f8f8f8; + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), rgba(0, 0, 0, 0) calc(50% + 1px), rgba(0, 0, 0, 0) 100%); + } +} + +.symbol-const { + color: #9575cd; +} + +.symbol-const:before { + content: 'K'; +} + +.symbol-decorator { + color: #0262C2; +} + +.symbol-decorator:before { + content: '@'; +} + +.symbol-directive { + color: #db4437; +} + +.symbol-directive:before { + content: 'D'; +} + +.symbol-class { + color: #4285f4; +} + +.symbol-class:before { + content: 'C'; +} + +.symbol-component { + color: #db4437; +} + +.symbol-component:before { + content: 'C'; +} + +.symbol-constant { + color: #9575cd; +} + +.symbol-constant:before { + content: 'K'; +} + +.symbol-interface { + color: #0097a7; +} + +.symbol-interface:before { + content: 'I'; +} + +.symbol-function { + color: #0f9d58; +} + +.symbol-function:before { + content: 'F'; +} + +.symbol-union { + color: #757575; +} + +.symbol-union:before { + content: 'U'; +} + +.symbol-enumeration { + color: #757575; +} + +.symbol-enumeration:before { + content: 'E'; +} + +.registration-form { + width: 543px; + height: 730px; + padding: 0px 80px; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + + h4 { + margin-top: 0px; + } + + iframe { + width: 100%; + height: 640px !important; + border: 0; + } +} + +/* START TabStrip styles */ + +.k-tabstrip { + margin: 0; + padding: 0; + zoom: 1; + position: relative; +} + +.k-tabstrip-items { + padding: 0.3em 0.3em 0; +} + +.k-tabstrip-scrollable .k-tabstrip-items { + white-space: nowrap; + overflow: hidden; +} + +.k-tabstrip > .k-button.k-bare { + position: absolute; + top: .27em; + z-index: 2; + user-select: none; +} + +.k-tabstrip-bottom > .k-button.k-bare { + top: auto; + bottom: .15em; +} + +.k-tabstrip-prev { + left: .4em; +} + +.k-tabstrip-next { + right: .4em; +} + +.k-tabstrip-items .k-item, +.k-panelbar .k-tabstrip-items .k-item { + list-style-type: none; + display: inline-block; + position: relative; + border-style: solid; + border-width: 1px 1px 0; + padding: 0; + vertical-align: top; +} + +.k-tabstrip-items .k-item { + overflow: hidden; +} + +.k-tabstrip-items .k-tab-on-top, +.k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-items .k-state-active { + margin-bottom: -1px; + padding-bottom: 1px; +} + +.k-tabstrip-top > .k-tabstrip-items .k-item, +.k-panelbar .k-tabstrip-items .k-item { + margin: 0 -1px 0 0; +} + +.k-tabstrip-top > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-top > .k-tabstrip-items .k-state-active { + border-bottom-width: 1px; + margin-bottom: -1px; + padding-bottom: 0px; +} + +.k-tabstrip-items .k-tab-on-top { + z-index: 1; +} + +.k-tabstrip-items .k-link, +.k-panelbar .k-tabstrip-items .k-link { + display: inline-block; + border-bottom-width: 0; + padding: .5em .92em; +} + +.k-tabstrip-items .k-icon, +.k-panelbar .k-tabstrip-items .k-icon { + margin: -1px 4px 0 -3px; + vertical-align: top; +} + +.k-tabstrip-items .k-item .k-image, +.k-tabstrip-items .k-item .k-sprite, +.k-panelbar .k-tabstrip-items .k-item .k-image, +.k-panelbar .k-tabstrip-items .k-item .k-sprite { + margin: -3px 3px 0 -6px; + vertical-align: middle; +} + +// TabStrip Loading Progress +.k-tabstrip-items .k-loading { + top: 0; + left: 0; + height: 0; + width: 20%; + position: absolute; + background: transparent; + border-top: 1px solid transparent; + border-color: inherit; +} + +.k-tabstrip-items .k-loading.k-complete { + width: 100%; +} + +.k-tabstrip > .k-content, +.k-panelbar .k-tabstrip > .k-content { + position: static; + border-style: solid; + border-width: 1px; + margin: 0 .286em .3em; + padding: .92em; + zoom: 1; +} + +.k-tabstrip > .k-content { + display: none; + overflow: auto; +} + +.k-tabstrip > .k-content.km-scroll-wrapper { + padding: 0; +} + +.k-tabstrip > .k-content > .km-scroll-container { + padding: .3em .92em; +} + +@keyframes k-tab-loader { + 0% { + left: 0; + } + + 50% { + left: 80%; + } + + 100% { + left: 0; + } +} + +// left and right tabs + +.k-tabstrip-left > div.k-content, +.k-tabstrip-right > div.k-content { + margin: .286em .3em; +} + +.k-tabstrip-left > .k-tabstrip-items .k-item, +.k-tabstrip-right > .k-tabstrip-items .k-item { + display: block; + margin-bottom: -1px; +} + +.k-tabstrip-left > .k-tabstrip-items .k-link, +.k-tabstrip-right > .k-tabstrip-items .k-link { + display: block; +} + +.k-tabstrip-left > .k-tabstrip-items .k-tab-on-top, +.k-tabstrip-right > .k-tabstrip-items .k-tab-on-top, +.k-tabstrip-left > .k-tabstrip-items .k-state-active, +.k-tabstrip-right > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-left > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-right > .k-tabstrip-items .k-state-active { + margin-bottom: -1px; + padding-bottom: 0; +} + +// left tabs + +.k-tabstrip-left > .k-tabstrip-items { + float: left; + padding: .25em 0 .3em .3em; +} + +.k-tabstrip-left > .k-tabstrip-items .k-item { + border-width: 1px 0 1px 1px; + border-radius: 3px 0 0 3px; +} + +.k-tabstrip-left > .k-tabstrip-items .k-state-active { + border-width: 1px 0 1px 1px; +} + +.k-tabstrip-left > .k-tabstrip-items .k-tab-on-top, +.k-tabstrip-left > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-left > .k-tabstrip-items .k-state-active { + margin-right: -1px; + padding-right: 1px; +} + +// right tabs + +.k-tabstrip-right > .k-tabstrip-items { + float: right; + padding: .25em .3em .3em 0; +} + +.k-tabstrip-right > .k-tabstrip-items .k-item { + border-width: 1px 1px 1px 0; + border-radius: 0 3px 3px 0; +} + +.k-tabstrip-right > .k-tabstrip-items .k-state-active { + border-width: 1px 1px 1px 0; +} + +.k-tabstrip-right > .k-tabstrip-items .k-tab-on-top, +.k-tabstrip-right > .k-tabstrip-items .k-state-active, +.k-panelbar .k-tabstrip-right > .k-tabstrip-items .k-state-active { + margin-left: -1px; + padding-left: 1px; +} + +// bottom tabs + +.k-tabstrip-bottom > .k-tabstrip-items { + margin-top: -1px; + padding: 0 .3em .3em; +} + +.k-tabstrip-bottom > .k-content, +.k-panelbar .k-tabstrip-bottom > .k-content { + margin: .3em .286em 0; + z-index: 1; + position: relative; +} + +.k-tabstrip-bottom > .k-tabstrip-items .k-item { + border-width: 0 1px 1px; + border-radius: 0 0 4px 4px; +} + +.k-tabstrip-bottom > .k-tabstrip-items .k-state-active { + margin-bottom: 0; + padding-bottom: 0; +} + +.k-tabstrip-bottom > .k-content { + min-height: 100px; +} + +.k-tabstrip-bottom > .k-tabstrip-items .k-loading { + top: auto; + bottom: 0; +} + +.k-tabstrip-wrapper { + background-color: #f8f8f8; + margin-bottom: 20px; + + ul { + margin-top: 0 !important; + } +} + +.k-tabstrip { + border: 1px solid #ebecee; + + .k-item, + .k-link, + .k-content, + .k-content pre, + .k-loading { + border: 0; + } + + .k-tabstrip-items { + background: #f5f7f8; + + .k-state-active .k-link { + font-weight: bold; + color: #000; + } + } + + .k-content { + background: #f8f8f8; + max-height: 40vh; + } + + .k-tabstrip-items { + .k-state-active { + background: white; + } + + .k-item { + font-weight: bold; + } + } + + .prettyprint { + padding: 0; + } +} + +.prettyprint { + border-color: #ebecee; +} + +.prettyprint code { + line-height: 1.4; +} + +/* END TabStrip styles */ + +/* START Introduction page all controls table styles */ + +article #allcontrols-table { + border: none; + word-wrap: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + overflow-wrap: break-word; + font-size: 15px; + margin: 15px 0 20px; + + .row { + margin-left: -15px; + margin-right: -15px; + font-size: 0; + } + + .column { + position: relative; + display: inline-block; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; + font-size: 16px; + vertical-align: top; + + // X-Small devices (portrait phones, less than 576px) + @media (max-width: 575.98px) { width: 100%; } + + @media (min-width: 576px) { width: 50%; } + + @media (min-width: 768px) { width: 33%; } + + @media (min-width: 1200px) { width: 25%; } + } + + ul { + list-style: none; + padding: 5px 0px; + margin: 0; + + li { + padding: 5px 0px; + } + } + + .control-category { + color: $accent; + text-transform: uppercase; + font-size: 20px; + font-weight: bold; + padding: 3px 0px; + } + + ul:not(.docs-tabstrip) li:before { + background-color: transparent !important; + } +} + +/* END Introduction page all controls table styles */ + +/* Kendo loading indicator in API*/ +div#sidetoc { + .k-loading-mask { + background-image: url(image_path("loading-image.gif")); + background-repeat: no-repeat; + z-index: 10000; + background-position-x: center; + background-position-y: center; + } + + .k-loading-text { + display: none; + } +} + +div { + &.k-content { + &.k-state-active { + .copy-code-btn { + padding: 7px 10px; + } + } + } +} + +.copy-code-btn { + position: absolute; + top: 0; + right: 0; + padding: 10px; + z-index: 100; + + &:hover { + cursor: pointer; + } +} + +/* CTA Panels styles */ + +/* Make sure CTA avatars are included */ +.kd-Kendoka-avatar { + background: url(image_path("Avatar-Kendoka-big.svg")) no-repeat 50% 50%; +} + +.kd-DevCraft-avatar { + background: url(image_path("Avatar-DevCraft-big.svg")) no-repeat 50% 50%; +} + +.kd-Ninja-avatar { + background: url(image_path("Avatar-Ninja-big.svg")) no-repeat 50% 50%; +} + +.kd-cta { + padding: 15px 30px; + margin-top: 32px; + display: inline-flex; + align-items: center; + border-width: 1px; + border-style: solid; + border-color: #5777EA; + border-radius: 2px +} + +.kd-cta-panel .container{ + width: auto; +} + +.kd-cta-panel.cta-small { + text-align: center; +} + +.kd-cta-content-wrapper { + display: flex; + -ms-flex-direction: row; + align-items: center +} + +.kd-cta-image { + margin-right: 30px +} + +.kd-cta-image img { + width: 50px; + margin: 0; +} + +h5.kd-cta-title { + margin-top: 0; + margin-bottom: 5px; + font-size: 28px; + font-weight: 700; + text-transform: none; +} + +.kd-cta-title { + margin-bottom: 5px +} + +.kd-cta-button-wrapper { + flex: none; + margin-left: 50px +} +.kd-button-primary { + background-color: #F46147; + color: #fff; + border-color: transparent; +} +.kd-button-md { + padding: 5px 24px; + font-weight: 400; + font-size: 19px; + line-height: 32px; +} +.kd-button { + display: inline-block; + border-radius: 2px; + text-align: center; + cursor: pointer; + text-decoration: none; + border-width: 2px; + border-style: solid; + transition: color .2s ease,background-color .2s ease,border-color .2s ease; +} +.kd-cta-lg { + padding: 16px 28px; + width: 1000px; + max-width: 100% +} + +.kd-cta-full-width { + width: 100% +} + +.kd-cta-lg .kd-cta-image img { + width: 100px +} + +.kd-cta-title-desc { + flex: 1 0 0 +} + +.kd-cta .kd-link { + font-weight: 700 +} + +.kd-cta-sm { + padding: 11px 32px +} + +.kd-cta-sm .kd-link,.kd-cta-sm .kd-text { + margin: 0; + font-weight: 500; + font-size: 28px +} + +.kd-cta-sm .kd-text { + color: #1F1F1F +} + +@media only screen and (max-width: 1440px) { + h5.kd-cta-title { + font-size:18px; + line-height: 22px + } +} + +@media (max-width: 1064px) { + .kd-cta,.kd-cta-content-wrapper { + display:block; + } + + .kd-cta-image { + margin-right: 0; + margin-bottom: 20px + } + + .kd-cta-button-wrapper { + margin-left: 0; + margin-top: 20px + } + + .kd-cta:not(.kd-cta-lg) .kd-cta-image { + display: none + } +} +/* END CTA Panels styles*/ diff --git a/_assets/css/_styles.scss b/_assets/css/_styles.scss index 4b12b81..9d38cd5 100644 --- a/_assets/css/_styles.scss +++ b/_assets/css/_styles.scss @@ -1,4668 +1,7 @@ -html, -body { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -webkit-font-feature-settings: "liga","kern"; - font-feature-settings: "liga","kern"; - -moz-osx-font-smoothing: grayscale; -} - -body, -article, -blockquote, -#results > div, -.side-nav, -.components { - font-size: 14px; - line-height: 1.2em; -} - -html { - height: 100%; - background-color: #FFFFFF; -} - -body { - min-height: 100%; - height: 100%; - position: relative; - font-family: $font-regular; - background-color: transparent; - color: $text-default-color; - transition: padding-top .1s; - padding-top: 95px; // navbar-fixed-top height + 20px margin - - &.scroll { - padding-top: 70px; - } - - &.scroll-page, - &.scroll-small-page { - height: auto !important; - } -} - -label { - font-weight: normal; - margin-bottom: 0; -} - -.img-responsive, -.img-responsive img { - -webkit-user-drag: none; - -moz-user-select: none; - user-drag: none; -} - -image { - width: auto; - height: auto; - max-width: 100%; -} - -div.caption { - color: #000000; - font-weight: 500; - font-size: 18px; - letter-spacing: -0.02em; - line-height: 1.222em; -} - -/* Sticky Footer Styles */ - -div#content { - min-height: 100%; - height: auto !important; - height: 100%; - margin: 0 auto -340px; - position: relative; - overflow: hidden; -} - -#push, -div#footer { - min-height: 340px; -} - -div#footer { - color: #000; - background-color: $footer-bg; - font-size: 11px; - line-height: 1.3em; - bottom: 0; - left: 0; - right: 0; - position: relative; - - h1, h2, h3, h4, h5, h6 { - color: #616161; - } - - h6 { - font-size: 14px; - font-family: $font-medium; - letter-spacing: 0.02rem; - text-transform: uppercase; - } - - ul { - font-size: 15px; - line-height: 22px; - } - - a { - color: #000; - transition: color .2s; - - &:hover, - &:focus { - opacity: 0.7; - } - } - - p { - color: #4f5d6c; - } - - .environment-develop & { - background-color: $env-develop-bg; - - h1, h2, h3, h4, h5, h6, - a:hover, - a:focus { - color: #ffd0a6; - } - } -} - -.copyright { - position: relative; - margin-top: 40px; - text-align: center; -} - -.social-icons { - padding-bottom: 50px; - - @media screen and (max-width: 1820px){ - padding-bottom: 30px; - } - - @media screen and (max-width: 768px){ - padding-bottom: 10px; - } -} - -#footer { - .social-icon { - text-align: center; - height: 30px; - line-height: 26px; - margin: 0; - padding: 0 15px; - text-align: center; - transition: opacity .2s; - - &:last-child { - padding-right: 0; - } - } - - .progress-logo { - p { - margin-top:10px; - } - } - - .legal-links-container{ - text-align: right; - - @media screen and (max-width: 768px){ - text-align: center; - } - - .legal-links { - padding:0; - - li { - list-style-type: none; - display: inline-block; - font-weight: 500; - font-size: 12px; - - &:not(:first-child) { - padding-left: 3px; - border-left: 1px solid #ccc; - } - } - } - - .dnsmpi { - border: 2px solid rgba(148, 216, 255, 0.533); - padding: 8px 16px; - - &:hover { - text-decoration: none; - opacity: 1; - border-color: rgb(148, 216, 255) - } - } - } -} - -.social-icon { - &:hover { - opacity: 0.5; - } - - svg { - width: 24px; - height: 24px; - vertical-align: middle; - } - - path { - fill: #1f1f1f; - } -} - -h1, .h1, -h2, .h2, -h3, .h3, -h4, .h4, -h5, .h5, -h6, .h6 { - color: $text-headings-color; - font-family: $font-heading; -} - -h1, .h1 { - font-size: 60px; - font-weight: $fw-semibold; - line-height: 54px; - word-break: break-word; -} - -h2, .h2 { - font-size: 45px; - font-weight: $fw-semibold; - line-height: 44px; -} - -h3, .h3 { - font-size: 35px; - font-weight: $fw-normal; - line-height: 34px; -} - -h4, .h4 { - font-size: 23px; - font-weight: $fw-bold; - line-height: 27px; -} - -h5, .h5 { - font-size: 13px; - line-height: 1.231em; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -p.lead { - font-size: 20px; - font-family: $font-regular; - line-height: 1.3; - color: #4f5d6c; - margin-bottom: 0; -} - -.sticky { - display: inline-block; -} - -a { - color: $link-color; /*0277bd*/ -} - -a:link, -a:hover, -a:focus, -a:active { - text-decoration: none; - outline: none; -} - -a:hover, -a:focus, -a:active { - color: $link-hover-color; -} - -b, -strong { - font-weight: 500; -} - -.clearfix:after { - display: block; - clear: both; - content: ""; - height: 0; - line-height: 0; -} - -.list-unstyled { - line-height: 30px; -} - -.release-date { /* Release date style in version heading h2 */ - font-size: .6em; - color: #4f5d6c; -} - -/* NavBar */ - -.navbar-fixed-top .navbar-collapse, -.navbar-fixed-bottom .navbar-collapse { - max-height: 360px; -} - -.navbar { - min-height: 34px; - line-height: 0; - margin-bottom: 0; - border-bottom: 0; - transition: top .1s, background-color .1s; - - .no-js &, - .scroll & { - background-color: #fff; - box-shadow: 0 0 12px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05); - } - - /* Hamburger Button Styles */ - .navbar-toggle { - width: 50px; - height: 50px; - padding: 0; - margin: 0; - background-color: transparent; - background-image: none; - border: 0; - border-radius: 0; - - &:hover, - &:focus { - background-color: #353c43; - } - - .icon-bar { - margin-left: auto; - margin-right: auto; - } - } -} - -.navbar-nav { - margin: 0 -15px; -} - -.navbar-collapse { - width: 100%; - padding-left: 0; - padding-right: 0; -} - -// Hat menu -nav.TK-Nav, .PRGS-PairNav { - width: 100%; - margin-top: -95px; -} - -// Ribbon Announcement - -#announcement-banner { - width: 100%; - position: fixed; - z-index: 40000; - left: 0; - top: 61px; - - .close-button-container { - position: absolute; - top: 19px; - right: 16px; - z-index: 100000; - - &:hover { - cursor: pointer; - } - } -} - - -@media screen and (max-width: 1240px){ - #announcement-banner { - top: 45px; - - #announcement-content > * { - padding-right: 40px; - } - } -} - -/* Main Menu */ - -$text-color: #4a4e52; -$hover-text: darken($text-color, 10%); - -#navbar { - $line-height: 35px; - $selection-size: 3px; - - transition: padding-top .1s; - padding-top: 20px; - margin-bottom: 20px; - - .scroll & { - background-color: #FFFFFF; - padding-top: 10px; - padding-bottom: 10px; - position: fixed; - top: 0; - width: 100%; - z-index: 10; - box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.2); - } - - a { - font-size: 15px; - padding: 1px 10px 0; - transition: line-height .1s; - line-height: $line-height; - color: $text-color; - text-transform: uppercase; - font-weight: 500; - font-family: $font-heading; - letter-spacing: 0; - background-color: transparent; - - &::after { - content: ""; - height: $selection-size; - display: block; - background-color: transparent; - transition: background-color .3s; - } - } - - a:hover::after, - a:focus::after, - a:active::after, - .active a::after { - background-color: $accent; - } - - li { - position: static; - } - - select { - position: absolute; - top: 54px; - transition: top .1s; - right: 15px; - max-width: 45%; - padding: 3px 10px 4px; - border: 1px solid #f1f1f1; - background: #ffffff; - box-shadow: 0 1px 1px 0 transparent; - font-family: inherit; - font-size: inherit; - outline: none; - - .scroll & { - top: 5px; - max-width: 30%; - } - } - - .main-menu { - display: none; - } - - svg { - display: block; - width: 20px; - height: 20px; - position: relative; - top: 45%; - transform: perspective(1px) translateY(-55%); - } - - .search-icon { - height: $line-height + $selection-size; - cursor: pointer; - - path { - fill: $text-color; - transition: fill .2s; - } - - &::after { - visibility: hidden; - } - - &:hover path, - &:active path, - &:focus path { - fill: $accent; - } - } - - .nav-button a { - background-color: $accent-solid; - - &:hover, - &:active { - background-color: darken($accent-solid, 10%); - } - } - - .primary-cta a { - background-color: $try-now; - - &:hover, - &:active { - background-color: $try-now-hover; - } - } - - .primary-cta a, .nav-button a { - color: #fff; - padding: 2px 20px 2px; - margin-left: 12px; - - &::after { - display: none; - } - } -} - -// hide primary cta on homepage until scrolled -.brand-homepage { - .navbar { - position: absolute; - box-shadow: none; - } - - .global-search { - right: 0; - } - - .primary-cta, .nav-button { - display: none; - } - - // duplicate styles with sticky navbar positioning - &.scroll-page { - .navbar { - position: fixed; - box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); - } - - .global-search { - right: 90px; - } - - .primary-cta, .nav-button { - display: block; - } - } -} - -/* Main Wrapper */ - -.overview { - padding-top: 50px; -} - -/* Getting started styles */ - -.brand-getting-started { - .call-to-action { - background-color: $accent; - color: #fff; - padding: 15px 24px; - margin-right: 2em; - display: inline-block; - text-transform: uppercase; - - &:hover, - &:active { - background-color: darken($accent, 10%); - color: #fff; - } - } - - #content article { - .call-to-action-info { - color: #4f5d6c; - width: 65%; - margin-bottom: 60px; - } - - hr { - margin: 50px 0; - } - } -} - -/* Breadcrumbs */ - -.breadcrumbs { - color: #95a3b1; - font-size: 16px; -} - -/* Version Picker */ - -#version { - background: transparent; - border: 0; - font-size: inherit; - color: $link-color; - font-family: $font-medium; - outline: none; - - &:hover { - color: $accent; - } - - option { - color: #000; - } -} - -/* Side-Nav Styles */ -$nav-icon-color: #979797; - -#page-tree, -#page-tree-api { - padding: 0; - white-space: normal; - word-break: break-word; - overflow: hidden; - font-family: "Metric", Helvetica, Arial, sans-serif; - outline: none; -} - -.side-nav { - padding-top: 25px; - padding-left: 0; - padding-right: 0; - top: 0; - left: 0; - overflow: auto; - position: fixed; - display: none; - background-color: #fff; - border: 1px solid #ececec; - z-index: 1070; - - #page-tree, - #page-tree-api { - .k-item { - padding-left: 0; - } - - ul:focus { - outline: none; - } - - ul li ul li { - span { - font-size: 16px; - line-height: 20px; - } - - ul li { - span { - font-size: 15px; - } - } - } - } - - .k-treeview .k-in { - border: 0; - line-height: 1.2em; - padding-right: 0; - } - - .k-in { - cursor: pointer; - display: block; - padding-left: 30px; - padding-top: 8px; - padding-bottom: 8px; - color: $navigation-link-color; - text-decoration: none; - } - - .k-state-hover { - background-color: $link-background-color; - } - - .k-state-selected { - color: $side-nav-link-color; - - a { - color: $side-nav-link-color; - font-weight: $side-nav-selected-fw; - - &:hover { - background-color: $link-background-color; - } - - &:active { - background-color: transparent; - color: $side-nav-link-color; - } - } - } - - .k-icon, .article { - position: relative; - margin: 0; - padding: 0; - } - - .article { - position: absolute; - left: 20px; - top: 5px; - } - - .k-icon:before { - content: ""; - display: none; - } - - #page-tree > .k-group > .k-item, - #page-tree-api > .k-group > .k-item { - > .k-last { - border-bottom: 1px solid $border-separator-color; - margin-right: 5px; - } - - div { - position: relative; - - > .k-icon { - position: absolute; - width: 36px; - height: 16px; - top: 25%; - - &.k-i-expand { - background: url(image_path("group-expand-collapse.svg")) no-repeat 50% 50%; - -ms-transform: rotate(-90deg); - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); - color: $nav-icon-color; - } - - &.k-i-collapse { - background: url(image_path("group-expand-collapse.svg")) no-repeat 50% 50%; - } - } - } - - // Side navigation root items - > div { - border-bottom: 1px solid $border-separator-color; - margin-right: 5px; - - > .k-icon { - display: none; - } - - .k-in, span > a { - text-transform: uppercase; - transition: background-color .1s, padding .1s, font-weight .1s; - font-weight: $fw-semibold; - color: $text-active-color !important; - font-size: 16px; - font-family: $font-regular; - line-height: 28px; - } - - .k-icon { - top: 25%; - left: auto; - } - - .k-in .article { - right: 15px; - top: 50%; - left: auto; - -ms-transform: translateY(-50%); - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - display: none; - } - } - } - - .k-group .k-group { - .k-item { - .k-icon { - &.k-i-collapse, - &.k-i-expand { - top: 11px !important; - width: 16px !important; - height: 14px !important; - opacity: 0.6; - position: absolute; - } - } - } - - .k-in { - padding-left: 48px; - - a { - padding-left: 48px; - margin-left: -48px; - padding-top: 6px; - margin-top: -6px; - padding-bottom: 6px; - margin-bottom: -6px; - } - } - - .k-icon, .article { - left: 28px; - } - - .k-group { - .k-in { - padding-left: 66px; - font-weight: 400; - - a { - padding-left: 66px; - margin-left: -66px; - } - } - - .k-icon, .article { - left: 46px; - } - - .k-group { - .k-in { - padding-left: 84px; - - a { - padding-left: 84px; - margin-left: -84px; - } - } - - .k-icon, .article { - left: 64px; - } - - .k-group { - .k-in { - padding-left: 102px; - - a { - padding-left: 102px; - margin-left: -102px; - } - } - - .k-icon, .article { - left: 82px; - } - - .k-group { - .k-in { - padding-left: 120px; - - a { - padding-left: 120px; - margin-left: -120px; - } - } - - .k-icon, .article { - left: 100px; - } - } - } - } - } - } - - .side-title { - padding-left: 30px; - padding-bottom: 10px; - } - - &.show-components { - display: block; - padding-bottom: 15px; - background-color: #fff; - border-bottom: 1px solid #e4e4e4; - border-left-width: 0; - border-right-width: 0; - z-index: 1100; - width: 100%; - - .side-title { - padding-left: 15px; - } - - > ul > li > ul > li > ul > li a { /* Exapnded link in Level 3 / Title of Level 4 */ - padding-left: 25px; - } - - > ul > li > ul > li > ul > li > ul > li a { - padding-left: 45px; - } - } - - ul { - list-style: none; - margin: 0; - padding: 0; - font-family: $font-medium; - } - - a { - display: block; - position: relative; - line-height: 1em; - text-decoration: none; - transition: background-color .2s; - overflow: hidden; - text-overflow: ellipsis; - color: $navigation-link-color; - } - - a.active { - color: $accent !important; - font-family: $font-medium; - } - - > ul > li > a { - font-weight: 500; - line-height: 1.2em; - } - - > ul > li.expanded { - background: #fafafa; - margin: 10px 0; - } - - > ul > li > ul { /* Level 2 */ - padding: 0 0 10px 0; - font-size: 14px; - font-family: $font-regular; - } - - > ul > li > ul > li a { - padding-top: 7px; - padding-bottom: 7px; - color: $link-color; - } - - /* Level 3 */ - - > ul > li > ul > li > ul { - font-size: 14px; - font-family: $font-light; - } - - > ul > li > ul > li > ul > li a { - padding-left: 40px; - padding-top: 5px; - padding-bottom: 5px; - } - - > ul > li > ul > li > ul > li.expanded > a { /* Exapnded link in Level 3 / Title of Level 4 */ - padding-left: 40px; - } - - /* Level 4 */ - - > ul > li > ul > li > ul > li > ul { - font-size: 13px; - font-family: $font-light; - } - - > ul > li > ul > li > ul > li > ul > li a { - padding-left: 60px; - } -} - -.side-title { - text-transform: uppercase; -} - -/* Article Styles */ - -article { - font-size: 20px; - line-height: 26px; - position: relative; - - b, - strong { - font-weight: 600; - } - - h1, h2, h3, h4, h5, h6 { - margin: 0; - padding: 0; - max-width: 1200px; - - a { - cursor: pointer; - color: $text-primary-color; - } - } - - h1, .h1 { - margin-top: 40px; - margin-bottom: 40px; - } - - h2, .h2 { - margin-top: 40px; - margin-bottom: 24px; - } - - h3, .h3 { - margin-top: 40px; - margin-bottom: 8px; - } - - &.api-reference .editor h3 { - margin: 0; - font-size: 22px; - line-height: 1em; - font-weight: 400; - letter-spacing: -0.02em; - } - - h4, .h4 { - margin-top: 24px; - margin-bottom: 8px; - } - - h5, .h5 { - margin-top: 24px; - margin-bottom: 8px; - } - - p { - max-width: 1200px; - font-size: 20px; - line-height: 26px; - margin-top: 8px; - margin-bottom: 8px; - - a:hover, - a:focus { - text-decoration: none; - } - - &.run-code { - margin-top: -5px; - margin-bottom: 40px; - } - } - - li { - font-size: 20px; - } - - &:not(.api-reference) > p:first-child, - &:not(.api-reference) h1 + p { - font-size: 22px; - line-height: 26px; - font-weight: $fw-normal; - font-family: $font-regular; - margin-top: 16px; - margin-bottom: 16px; - } - - h3 + p, - .h3 + p, - h4 + p, - .h4 + p { - margin-top: 0; - } - - ul, ol { - max-width: 1200px; - margin: 8px 22px; - padding: 0 0 0 12px; - - &.k-tabstrip-items{ - margin: 1em 0; - } - - li { - margin-bottom: 3px; - position: relative; - } - - img { - margin: 0; - } - } - - &.api-reference ul, - ul.docs-tabstrip, - ul.k-reset, - ul.k-pager-numbers { - list-style: none; - } - - ul.list-unstyled li { - padding: 0; - - &:before { - content: none; - } - } - - img { - margin: 30px 0; - width: auto; - height: auto; - max-width: 100%; - } - - /* Article Table Styles */ - table { - width: 100%; - table-layout: fixed; - margin: 15px 0 20px; - word-break: break-word; - overflow-wrap: break-word; - - th { - color: #8a959f; - background-color: #fcfcfc; - border-bottom: 1px solid #e4e4e4; - font-size: 13px; - font-weight: normal; - text-transform: uppercase; - } - - th, - td { - padding: 5px 10px; - } - - tr:nth-child(odd) { - background-color: #fcfcfc; - } - } - - h4 { - em { - color: #8a959f; - font-style: normal; - padding: 0 5px; - } - - code { - font-size: 16px; - padding: 2px 5px 3px; - } - - &.example-title { - margin-top: 25px; - margin-bottom: 10px; - padding: 0; - text-transform: uppercase; - color: #000000; - font-size: 15px; - line-height: 1em; - letter-spacing: 0.02em; - font-weight: 500; - font-family: $font-heading; - } - } -} - -ul.mdash { - list-style: none; - - li { - padding-left: .3em; - position: relative; - - &:before { - content: ""; - position: absolute; - top: .7em; - left: -20px; - width: 14px; - height: 1px; - background-color: currentColor; - } - } -} - -blockquote { - border: 0; - margin: 20px 0; - min-height: 70px; - padding: 24px 80px; - background-color: $important-bg; - background-image: url(image_path("important-icon.svg")); - color: #fff; - background-repeat: no-repeat; - background-size: 48px; - background-position: center; - background-position-x: 16px; - background-position-y: 50%; - - &:not(.alert-note) a, - &:not(.alert-note) a:link { - color: #000000; - text-decoration: underline; - - &:hover, - &:active, - &:focus { - color: #000000; - text-decoration: none !important; - } - } - - color: #000000; - - p:first-child, - ul:first-child, - ol:first-child { - margin-top: 0; - } - - p:last-child, - ul:last-child, - ol:last-child { - margin-bottom: 0; - } - - &.disclaimer { - background-color: #eaebec; - color: #4f5d6c; - - p:first-child { - color: #36393f; - } - } - - &.alert-note { - margin-top: 2em; - margin-bottom: 2em; - background-color: #eaebec; - color: #4f5d6c; - } - - &.important { - background-color: $important-bg; - background-image: url(image_path("important-icon.svg")); - } - - &.caution, - &.warning { - background-color: $caution-bg; - background-image: url(image_path("caution-icon.svg")); - } - - &.tip, - &.note { - background-color: $tip-bg; - background-image: url(image_path("tip-icon.svg")); - } -} - -/* Article TOC & Related Articles */ -$border-color: #d9d9d9; - -#stick-marker { - margin-top: 6px; -} - -.additional-content-column { - position: absolute; - right: 0; - top: 25px; - margin-right: 40px; - - .btn-action { - color: $btn-action-foreground; - background-color: $btn-action-background; - text-transform: uppercase; - padding: 10px 20px; - margin: 10px 0; - border: 1px solid $accent; - border-radius: 0; - font-size: 14px; - font-weight: 500; - - &:hover, - &:focus, - &:active { - color: $btn-action-active-color; - background-color: $btn-action-active; - } - } - - .btn-contact-support { - color: $btn-support-color; - background-color: $btn-support-bg; - border: 1px solid $btn-support-border; - border-radius: 30px; - padding: 5px 10px; - font-size: 16px; - margin: 10px 0; - display: block; - text-align: center; - - &:hover, - &:focus, - &:active { - border-color: $btn-support-border-hover; - } - } - - .btn-edit-article { - font-size: 16px; - position: relative; - padding-left: 20px; - - &::before { - content: ""; - position: absolute; - top: -2px; - left: -3px; - width: 20px; - height: 20px; - background: url(image_path("edit.svg")) no-repeat 50% 50%; - } - } - - .support-info-area { - margin-bottom: 50px; - } - - .additional-info-content { - padding-top: 10px; - font-size: 17px; - font-weight: 500; - color: $text-active-color; - } - - &.affix { - margin-top: 85px; - position: fixed; - top: 0; - z-index: 1015; - } - - &.empty { - display: none !important; - } -} - -.related-articles { - > ul > li > a { - font-weight: 500; - } -} - -.uppercase-clear { - text-transform: none !important; -} - -.article-toc, .related-articles, .feedback-ab { - font-size: 14px; - margin-bottom: 30px; - padding-left: 10px; - border-left: 1px solid $border-separator-color; - - .side-title { - padding-top: 10px; - font-size: 17px; - font-weight: 500; - color: $text-active-color; - } - - .layout-components &.affix-top { - position: relative; - top: 160px; - } - - &.empty { - display: none !important; - } - - ul { - margin: 10px 0 10px -15px; - - a { - display: block; - margin: 14px 0 5px; - border-left: 5px solid transparent; - line-height: 1em; - padding: 2px 0 2px 14px; - text-decoration: none; - transition: color .1s, border-color .1s; - color: $navigation-link-color; - - &:hover, - &:active, - &:focus { - background-color: transparent; - color: $accent; - } - } - } - - .anchor-h1, - .anchor-h2 { - font-family: $font-medium; - font-size: 14px; - } - - .anchor-h3 { - margin: 5px 0; - font-family: $font-light; - font-size: 14px; - padding-left: 30px; - } - - hr { - width: 25px; - margin-left: 0; - border-top-color: $border-color; - } - - .active a { - color: $text-active-color; - border-color: $accent; - font-weight: 500; - } - - a:active { - color: #36393f; - } -} - -.article-cta { - background-color: #ee5247; - background-image: linear-gradient(to left, rgba(238, 150, 111, 0), rgba(238, 150, 111, 0.5)), url(image_path("big-brand.png")); - background-position: 50% 50%; - color: #fff; - margin: 70px -90px -60px; - padding: 0 75px 60px; // 90 - gutter/2 - position: relative; - z-index: 2; - - h2 { - color: inherit; - - a:hover, - a:focus, - a:active { - color: #fff; - - &:after { - display: none; - } - } - } - - p:first-child { - margin-top: 0; - } - - .btn-cta { - color: inherit; - text-transform: uppercase; - border: 2px solid currentColor; - border-radius: 0; - - &:hover, - &:focus, - &:active { - color: #f1f1f1; - } - } -} - -.article-cta-bg { - background-color: $footer-bg; - display: block; - z-index: 1; - position: absolute; - left: -100vw; - bottom: 0; - width: 200vw; - height: 175px; -} - -/* Search Results */ - -#search-container { - .results-message { - border: none; - } - - .k-pager-numbers-wrap select.k-dropdown { - display: none; - } - - .k-pager-wrap { - background-color: transparent; - justify-content: space-between; - - .k-pager-info { - display: none; - } - } - - .k-pager-numbers-wrap { - display: inline-block; - } - - .k-pager-nav:nth-child(4) { - float: right; - } -} - -#results { - border-top: 1px solid #e4e4e4; - border-left: none; - border-right: none; - border-bottom: none; - - > div { - padding: 20px 0 0; - line-height: 1.3em; - } - - h2 { - margin-top: 0; - margin-bottom: 2px; - font-size: 24px; - font-weight: 400; - color: #2489d8 !important; - } - - p { - margin: 0; - font-size: 13px; - color: #7d8a98; - - a { - font-size: 13px; - } - } -} - -.go-back { - svg { - width: 12px; - height: 12px; - } - - path { - fill: $link-color; - } - - &:hover path { - fill: $link-hover-color; - } -} - -/* Pager Styles */ - -.site-pager { - text-align: center; - font-size: 15px; - border: none; - - .k-pager-nav.k-pager-first, - .k-pager-nav.k-pager-last { - display: none; - } - - .k-pager-numbers { - display: inline-block; - margin: 0; - padding: 0; - list-style: none; - } - - .k-pager-numbers li { - display: inline-block; - padding: 0; - } - - .k-pager-numbers li a, - .k-pager-numbers li span, - a.k-pager-nav { - display: block; - min-width: 20px; - height: 50px; - line-height: 50px; - margin-top: 10px; - margin-bottom: 10px; - padding-left: 20px; - padding-right: 20px; - vertical-align: middle; - color: #a2a2a4; - outline: none; - border: 1px solid transparent; - border-radius: 0; - } - - .k-pager-numbers li a:hover, - .k-pager-numbers li a:focus { - background-color: #eaebec; - color: #36393f; - } - - .k-pager-numbers li .k-state-selected { - border-color: #cacacb; - color: #36393f; - } - - li.k-current-page { - display: none; - } - - a.k-pager-nav { - padding-left: 10px; - padding-right: 10px; - border-color: #cacacb; - color: #36393f; - font-family: $font-regular; - border-radius: 0; - border: 0; - - &.k-state-disabled { - visibility: hidden; - } - - &:hover, - &:focus { - background-color: #eaebec; - color: #36393f; - } - } -} - -article table tr { - background-color: #f8f8f8; -} - -/* Search Popup */ - -#refine-search-popup { - font-size: 11px !important; - color: black; - border: none; - box-shadow: 3px 3px 19px rgba(0, 0, 0, 0.1); - min-width: 200px; - - ul { - margin: 0; - padding: 0; - background: #FFFFFF; - } - - li { - list-style: none; - - &:hover { - background-color: $accent; - color: #FFFFFF; - - .k-icon { - color: #FFFFFF; - } - } - - label { - padding: 15px; - cursor: pointer; - font-size: 12px; - } - - .k-icon { - color: $accent-solid; - } - } -} - -.custom-checkbox { - text-transform: uppercase; - display: block; - - input[type="checkbox"] { - display: none; - - &:checked ~ span.k-icon { - opacity: 1; - } - } - - span.k-icon { - opacity: 0; - } - - .k-icon { - margin-right: 8px; - font-size: 13px; - } -} - -.search-input-container { - position: relative; - padding: 0 2px 2px 2px; -} - -#refine-search-container { - white-space: nowrap; - position: absolute; - top: 0; - right: 0; - height: 50px; -} - -#refine-search-button { - text-transform: uppercase; - color: black; - cursor: pointer; - padding: 7px; - line-height: 36px; - - .k-icon { - margin-left: 10px; - margin-right: 10px; - vertical-align: middle; - } -} - -#refine-search-label { - font-size: 13px; - vertical-align: middle; -} - -.unselectable { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#page-search { - margin: 0; - width: 100%; - background-color: transparent; - padding: 0; - right: 435px; - text-align: right; - max-width: 930px; - - > div { - text-align: left; - display: inline-block; - width: 100%; - } - - form { - margin-bottom: 0; - box-shadow: 3px 3px 19px rgba(0, 0, 0, 0.1); - } - - table { - margin: 0; - padding: 0; - border: none; - - td { - border: none; - } - } - - input { - width: 100%; - height: 39px; - padding-left: 40px; - padding-right: 15px; - border: 0; - font-size: 19px; - font-family: $font-light; - outline: none; - background-image: url(image_path("search.svg")); - background-repeat: no-repeat; - background-position: 10px 50%; - background-size: 16px; - background-color: transparent; - } - - &.search-visibility { - display: block; - } -} - -#search-container { - input { - width: 100%; - height: 50px; - padding-left: 45px; - padding-right: 15px; - border: 1px solid #fff; - font-size: 19px; - font-family: $font-light; - outline: none; - color: #36393f; - background: url(image_path("search.svg")) #fff no-repeat 10px 50%; - transition: border-color .2s, box-shadow .2s; - } -} - -.toggle-nav, -.show-search { - display: none; - cursor: pointer; -} - -.nav.nav-visibility { - display: block; -} - -.k-tabstrip { - border: 1px solid #ccc; - outline: none; - - .k-link { - padding: 0; - } - - .k-content, - .k-loading { - border: 0; - } - - .k-tabstrip-items { - padding: 0; - border-bottom: 1px solid; - } - - .k-item { - border-width: 0 1px 0 0; - border-style: solid; - font-weight: bold; - font-size: 14px; - padding: .72em 1.5em; - cursor: pointer; - transition-property: background-color, color; - transition-duration: 0.2s; - transition-timing-function: ease; - } - - .k-content pre { - border: 0; - padding: 0; - margin: 1em 0; - } -} - -.toc-prev-next { - float: right; - - a { - display: inline-block; - color: #898c92; - margin: -2px 0; - padding: 2px 15px 2px 10px; - font-size: 10px; - letter-spacing: 0.04em; - text-transform: uppercase; - font-family: $font-medium; - box-shadow: none; - } - - .read-next { - border-left: 1px solid #353c43; - padding: 2px 5px 2px 15px; - } - - svg { - width: 13px; - height: 13px; - vertical-align: middle; - margin: -1px 3px 0; - } - - path { - fill: #fff; - } -} - -.title-prev, .title-next { - display: none; - transition: display .2s; -} - -/* Feedback Styles */ - -@media screen and (min-width: 768px){ - .feedback-more-info.show { - flex: 0 0 79.1667%; - max-width: 79.1667%; - margin-left: 20.8333%; - padding-left: 16px - } -} - -@media screen and (min-width: 576px){ - .feedback-more-info.show { - flex: 0 0 100%; - max-width: 100%; - margin-left: 0%; - } -} - -.feedback-more-info { - width: 100%; - flex: 0 0 100%; - max-width: 100%; - margin-left: 0%; - max-height: 0; - overflow: hidden; - padding-left: 35px; - padding-right: 16px; - - &.show { - display: block; - transition: max-height 0.2s ease-out; - max-height: 240px; - padding-bottom: 10px; - } - - &.hide { - max-height: 50px; - overflow: hidden; - transition: max-height 0.2s ease-out; - } - - .feedback-other-text-input { - color: #000000; - font-size: 16px; - font-weight: 400; - margin: 10px 0; - padding: 10px; - width: 100%; - max-width: 100%; - min-width: 100%; - height: 120px; - - &:focus { - outline: none; - } - } - - .feedback-skip-button { - display: inline-block; - border-radius: 2px; - text-align: center; - cursor: pointer; - text-decoration: none; - border-width: 2px; - border-style: solid; - transition: color .2s ease, background-color .2s ease, border-color .2s ease; - padding: 5px 24px; - font-weight: 400; - font-size: 19px; - line-height: 32px; - margin-left: 15px; - text-transform: none; - background-color: transparent; - border-color: #C1E8FF; - color: #000; - - &:hover { - cursor: pointer; - border-color: #94D7FF; - } - } - - .feedback-ab-submit-button { - padding: 6px 12px; - margin: 0; - background-color: $accent; - border: 1px solid #FFFFFF; - color: #FFFFFF; - font-size: 14px; - font-weight: 400; - text-transform: none; - - &:hover, - &:active, - &:focus { - background-color: rgba(255, 255, 255, 0.2); - } - } -} - -.feedback-row { - background-image: url(image_path("feedback-bgr.svg")); - background-size: cover; - background-repeat: repeat-x; - font-size: 19px; - font-weight: 500; - z-index: 1100; - - .feedback-question>div{ - display: flex; - padding: 10px 0px; - align-items: center; - flex-wrap: nowrap; - justify-content: center; - } - - @media screen and (max-width: 768px) - { - .feedback-question>div { - flex-wrap: nowrap; - justify-content: space-between; - } - } - - .feedback-button { - display: inline-block; - border-radius: 2px; - text-align: center; - cursor: pointer; - text-decoration: none; - border-width: 2px; - border-style: solid; - transition: color .2s ease, background-color .2s ease, border-color .2s ease; - } - - .feedback-send-data-button { - display: inline-flex; - align-items: center; - justify-content: center; - outline: none; - cursor: pointer; - user-select: none; - border-radius: 2px; - font-weight: 500; - font-size: 19px; - padding: 9px 14px; - line-height: 12px; - min-width: 60px; - } - - - .feedback-button-secondary { - background-color: #2E64D6; - color: #fff; - border-color: transparent; - } - - .feedback-button-secondary:hover { - background-color: #2456BE; - color: #fff; - } - - .feedback-vote-buttons{ - display: flex; - } - - @media screen and (min-width: 768px){ - .feedback-vote-buttons{ - margin-top: 0px; - } - } - - @media screen and (max-width: 380px){ - .feedback-question > div{ - padding-top: 5px; - padding-bottom: 5px; - } - .feedback-vote-buttons{ - flex-wrap: wrap; - row-gap: 5px; - } - } - - .feedback-vote-button { - display: flex; - align-items: center; - justify-content: center; - outline: none; - cursor: pointer; - user-select: none; - border: 0px; - border-radius: 2px; - font-weight: 500; - color: white; - background-color: rgb(46, 100, 214); - font-size: 19px; - padding: 9px 14px; - line-height: 12px; - min-width: 60px; - - &:hover { - background-color: #2456BE; - color: #fff; - } - } - - .close-button-container { - display: none; - position: absolute; - top: 50%; - right: 20px; - transform: translateY(-50%); - background: none; - outline: none; - border: 0px; - - &:hover { - cursor: pointer; - } - } - - &.vote-disabled { - display: none; - } - - &.vote-hide { - animation-name: hideFeedback; - animation-duration: 0.2s; - animation-timing-function: ease-out; - animation-fill-mode: forwards; - } - - @keyframes hideFeedback { - from { - opacity: 1; - } - - to { - opacity: 0; - } - } - - &.feedback-fixed { - position: fixed; - left: 0; - bottom: 0; - width: 100%; - margin: 0; - z-index: 1100; - background-color: #e7ebf5; - - .close-button-container { - display: block; - } - } - - h3 { - font-weight: 500; - font-size: 26px; - line-height: 1; - display: inline-block; - color: rgb(31, 31, 31) !important; - margin-top: 0px; - margin-bottom: 0px; - width: 100%; - text-align: center; - } - - @media screen and (min-width: 768px){ - h3{ - text-align: left; - } - } - - h4 { - color: #1f1f1f !important; - } - - button { - display: inline-block; - text-decoration: none; - text-transform: uppercase; - background: transparent; - border: none; - color: $feedback-button-foreground; - cursor: pointer; - transition-property: background-color, color; - transition-duration: 0.2s; - transition-timing-function: ease; - - &:hover, - &:focus, - &:active, - &:visited { - color: $feedback-foreground; - outline: none; - } - } - - .feedback > div { - line-height: 23px; - } - - .feedback > div.side-title{ - line-height: 50px; - font-size: 26px; - } - - @media screen and (max-width: 384px){ - .feedback > div.side-title { - line-height: 30px; - } - } - - @media screen and (max-width: 768px){ - .feedback > div.side-title { - text-align: center; - } - } -} - -.button-close { - position: absolute; - top: 12px; - right: 12px; - border: 0; - width: 32px; - height: 32px; - background: url(image_path("close.svg")) no-repeat 50% 50%; -} - -.button-close span { - display: none; -} - -.button-close:focus { - outline: none; -} - -/* Prev Next Styles */ - -.prev-next { - margin-left: 0; - margin-right: 0; - border-top: 1px solid #e4e4e4; - - a { - display: block; - margin-left: -15px; - padding-left: 20px; - text-decoration: none; - color: $link-color; /*#6de3c2 $accent*/ - fill: $link-color; - font-size: 21px; - line-height: .9em; - font-family: $font-medium; - } - - a span { - display: block; - margin-top: 5px; - color: #36393f; - font-size: 13px; - line-height: 15px; - font-family: $font-regular; - } - - a:hover, a:focus, a:active, - a:hover span, a:focus span, a:active span { - color: $link-hover-color; - fill: $link-hover-color; - } - - a:hover span, a:focus span, a:active span { - text-decoration: underline; - } - - svg { - width: 16px; - height: 16px; - margin-left: -20px; - vertical-align: baseline; - } - - .next { - float: right; - text-align: right; - } - - .next a { - margin-left: 0; - margin-right: -15px; - padding-left: 0; - padding-right: 20px; - } - - .next svg { - margin-left: 0; - margin-right: -20px; - } -} - -/* Temp styles */ -[data-code-language] { - position: relative; - - &::after { - content: attr(data-code-language); - font-family: $font-regular; - position: absolute; - display: block; - top: 5px; - right: 11px; - height: 31px; - line-height: 31px; - vertical-align: middle; - padding: 0 6px 0 0; - text-align: right; - color: #8a959f; - text-shadow: -2px -2px 0 #fefefe, 2px -2px 0 #fefefe, -2px 2px 0 #fefefe, 2px 2px 0 #fefefe; - font-size: 11px; - letter-spacing: 0.04em; - } -} - -.tab-content { - min-height: 30px; - margin: 15px 0 30px; -} - -.snippet-runner { - width: 100%; - height: 260px; - background-color: #fff; - box-shadow: inset 0 0 0 1px #ececec; - - .pane-preview & { - box-shadow: none; - background-color: transparent; - } -} - -/* List of Components */ - -.components { - border-bottom: 1px solid #e4e4e4; -} - -.components-tabstrip { - & a { - font-size: 14px; - } - - li { - &, &.active { - border: none; - } - - &::after { - content: ''; - display: block; - background-color: $accent; - width: 100%; - transform: scaleX(0.4); - transition: transform .25s ease-in-out; - height: 0; - } - - &:hover::after { - height: 1px; - transform: scaleX(0.4); - } - - &.active::after { - height: 2px; - transform: scaleX(1); - } - } -} - -@keyframes showTab { - from { - opacity: 0.1; - transform: translateX(-2%); - } - - to { - opacity: 1; - transform: translateX(0); - } -} - -#r-components, #r-wrappers { - &.tab-pane { - animation: showTab 0.25s ease-in-out 0s; - } -} - -.component-item { - position: relative; - padding-left: 36px; - - .highlights & { - h2 { - font-size: 2.5em; - } - - .component-icon { - top: 9px; - } - } - - h2 { - font-size: 1.6em; - font-weight: 400; - - > a { - display: block; - text-overflow: ellipsis; - overflow: hidden; - } - } - - p { - font-size: 13px; - line-height: 1.3em; - color: #7d8a98; - } - - ul, ol { - margin-bottom: 0; - } - - .list-unstyled { - line-height: 16px; - } - - .list-unstyled li { - padding: 6px 0 2px; - } -} - -.component-icon { - display: block; - position: absolute; - top: 2px; - left: 0; - width: 24px; - height: 24px; - - /*background: url(image_path('icon-placeholder.svg')) no-repeat 0 50%;*/ - - > svg { - width: 24px; - height: auto; - vertical-align: top; - - > path { - fill: $accent; - } - } -} - -/* Homepage styles (live demo) */ - -$callout-bg: #d7dfe3; - -.demo-embed { - h4, - .run-code, - pre { - display: none; - } - - .runner iframe { - background-color: transparent; - box-shadow: none; - } -} - -#demo-info-link { - padding-left: 1.4em; - padding-right: 1.4em; -} - -.live-samples .callout-tabs { - list-style-type: none; - margin: 0; - padding: 0; - position: relative; - - li { - display: inline-block; - border: 1px solid #dedede; - border-width: 1px 0; - margin-top: -1px; - } - - h4 { - text-transform: uppercase; - clear: both; - color: #2f8eb8; - line-height: 2em; - margin: 0; - padding: 0 .5em; - cursor: pointer; - font-size: 18px; - font-family: Roboto,Arial,Helvetica,sans-serif; - font-weight: 400; - - &:hover { - color: #006a88; - } - } - - div { - display: none; - padding: .5em; - font-size: 16px; - margin: 0; - } - - .active { - background-color: $callout-bg; - - h4 { - color: #000; - cursor: default; - } - } -} - -// md size -@media (min-width: 992px) { - .SiteRibbon { - font-size: 20px; - } - - .live-samples .callout-tabs { - &::after { - display: none; - } - - li { - display: block; - position: relative; - padding: 10px 20px; - - // callout - &::before { - position: absolute; - content: ""; - display: block; - width: 0; - height: 0; - border-style: solid; - border-width: 0 0 28px 28px; - border-color: transparent transparent fade-out($callout-bg, 1); - left: 0; - top: 7px; - z-index: 0; - transition: all .1s 0s; - } - - // background - &::after { - position: absolute; - content: ""; - left: 20px; - right: 20px; - top: 20px; - bottom: 20px; - z-index: 0; - background-color: fade-out($callout-bg, 1); - transition: all .2s .1s; - } - } - - h4 { - line-height: 48px; - } - - h4, div { - position: relative; - z-index: 1; - top: 0; - left: 0; - padding: 0; - } - - div { - display: block; - overflow: hidden; - max-height: 0; - transition: max-height 0 .5s; - } - - .active { - background-color: transparent; - - &::before { - left: -28px; - border-color: transparent transparent $callout-bg; - transition: all .5s .2s; - } - - &::after { - background-color: $callout-bg; - left: 0; - right: 0; - top: 0; - bottom: 0; - transition: all .2s 0s; - } - - div { - max-height: 300px; - } - } - } -} - -/* Global Search */ - -.global-search { - display: block; - right: 30px; - overflow: hidden; - margin-left: 15px; - transition: left .2s; - - &.show-search { - left: -10%; - } - - .scroll & { - top: 8px; - } - - input { - width: 100%; - height: 48px; - padding-left: 40px; - padding-right: 15px; - border-radius: 2px; - border: 1px solid transparent; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); - font: 300 22px/26px Metric,Arial,sans-serif; - outline: 0; - color: #555555; - background-image: url(image_path("search.svg")); - background-repeat: no-repeat; - background-position: 10px 50%; - background-size: 16px; - background-color: transparent; - transition: border-color .2s, box-shadow .2s; - - &:hover { - border: 1px solid #2D2DB2; - font-weight: 400; - color: #000; - transition: border 200ms ease-in; - } - - &:focus { - border: 1px solid #2D2DB2; - font-weight: 400; - color: #000; - transition: border 200ms ease-in; - } - } - - #refine-search-container { - height: 39px; - } - - #refine-search-button { - line-height: 30px; - font-size: 16px; - } -} - -.local-search { - input { - width: 100%; - height: 50px; - padding-left: 45px; - padding-right: 15px; - border: 1px solid #fff; - font-size: 19px; - font-family: $font-light; - outline: none; - color: #36393f; - background: url(image_path("search.svg")) #fff no-repeat 10px 50%; - transition: border-color .2s, box-shadow .2s; - box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.05); - - &:hover { - box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.1); - } - - &:focus { - border-color: #d9d9d9; - } - } -} - -.button { - display: inline-block; - min-width: 120px; - height: 50px; - line-height: 48px; - padding-left: 20px; - padding-right: 20px; - color: #fff; - background-color: #0081a6; - vertical-align: middle; - text-align: center; - font-size: 15px; - font-family: $font-heading; - border: 1px solid transparent; - outline: none; - transition: background-color 0.2s; - - &.small { - min-width: 40px; - height: 36px; - line-height: 34px; - padding-left: 20px; - padding-right: 20px; - } - - &:hover, - &:focus, - &:active { - color: #fff; - background-color: $link-hover-color; - text-decoration: none; - } - - &.ghost { - font-size: 16px; - color: #36393f; - background-color: transparent; - border-color: #cacacb; - - &:hover, - &:focus { - color: #36393f; - background-color: #eaebec; - } - } - - &.secondary { - color: #324359; - background-color: #afe0f4; - text-transform: uppercase; - font-weight: 500; - letter-spacing: 1px; - - &:hover, - &:focus { - background-color: #8ed7f5; - } - } - - article & { - min-width: 60px; - height: 36px; - line-height: 33px; - padding-left: 15px; - padding-right: 15px; - } -} - -a.all-components { - float: left; - position: relative; - cursor: pointer; - font-size: 16px; - font-family: $font-regular; - text-align: left; - color: #333; - padding: 1px 40px 0 !important; - padding-left: 15px; - margin-left: 15px; - margin-right: 10px; - background-color: #fff; - background-image: url(image_path("article-menu.svg")); - background-repeat: no-repeat; - background-position: left 11px top 50%; - - &.button { - min-width: 42px; - height: 35px; - } - - &:active, - &:hover, - &:focus { - background-color: #eaebec; - color: #333; - } - - &::after { - content: " "; - background-color: transparent !important; - } - - .scroll & { - box-shadow: none; - margin-right: 0; - } -} - -span.all-components-expanded-icon { - position: absolute; - top: 10px; - left: 80px; - background-image: url(image_path("group-expand-collapse.svg")); - background-repeat: no-repeat; -} - -.col-xl-8, .col-xl-10 { - position: relative; - padding-left: 15px; - padding-right: 15px; -} - -/* API Pages */ - -.api-reference { - h1 { - word-break: break-word; - } - - h1 + p { - margin-top: 30px; - } - - h2 { - margin-top: 10px; - margin-bottom: 10px; - font-size: 26px; - font-weight: 400; - word-break: break-word; - } - - h3 { - margin-top: 20px; - margin-bottom: 2px; - font-size: 20px; - font-weight: 500; - word-break: break-word; - } - - h3, - h4, - h4 ~ p { - code, - .code { - background-color: $code-background-color; - color: #ffffff; - margin-top: 3px; - padding: 3px 4px; - font-size: 13px; - line-height: 10px; - - a:hover, - a:focus, - a:active { - color: #fff; - - &::after { - display: none; - } - } - } - } - - h4 { - font-size: 11px; - line-height: 1.231em; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-top: 20px; - margin-bottom: 0px; - - a { - color: #4f5d6c; - } - } - - h5 { - text-transform: none; - margin-top: 10px; - margin-bottom: 0; - font-size: 15px; - letter-spacing: 0; - font-family: $font-heading; - - code, - .code { - background-color: $code-background-color; - color: #ffffff; - padding: 1px 3px 2px; - font-size: 13px; - font-weight: 400; - } - } - - h4, - h5, - h4 + p, - h5 + p { - padding-left: 20px; - } - - h4 + p, - h5 + p { - font-size: 14px; - } - - p { - margin-top: 0; - margin-bottom: 5px; - - br { - display: none; - } - - br + br { - display: initial; - } - } -} - -/* Icon Card List Styles */ - -.separator-bottom { - border-bottom: 1px solid #e4e4e4; -} - -.card-list-info { - padding: 30px 0; -} - -.card-list { - list-style-type: none; - margin: 30px 0; - padding: 0; - line-height: 1.4em; - - li { - box-sizing: border-box; - vertical-align: top; - margin: 0; - padding: 0; - text-align: center; - transition: .3s all ease; - - a { - display: block; - margin: 0; - padding: 30px 0 40px; - text-decoration: none; - color: #3f4d5c; - transition: .3s all ease; - } - - p { - margin: 5px 0 0 0; - font-size: 1.25em; - } - - &:hover { - background-color: #fff; - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 3px 15px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.04); - position: relative; - z-index: 1; - - a { - color: $accent; - } - } - - &:before { - display: none; - } - } - - svg { - max-width: 70px; - - path { - fill: url(#gradient); - } - } -} - -/* Media Queries */ -/* ####################################################################################################### */ - -@media (max-width: 767px) { - .global-search { - position: absolute; - left: 100px; - } - - #refine-search-label { - display: none; - } - - article { - font-size: 16px; - line-height: 24px; - - h1, .h1 { - font-size: 40px; - font-weight: $fw-semibold; - line-height: 36px; - word-break: break-word; - } - - h2, .h2 { - font-size: 30px; - font-weight: $fw-semibold; - line-height: 30px; - } - - h3, .h3 { - font-size: 28px; - font-weight: $fw-normal; - line-height: 26px; - } - - h4, .h4 { - font-size: 19px; - font-weight: $fw-bold; - line-height: 21px; - } - - h5, .h5 { - font-size: 13px; - line-height: 1.231em; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.05em; - } - - &:not(.api-reference) > p:first-child, - &:not(.api-reference) h1 + p { - font-size: 16px; - line-height: 20px; - font-weight: $fw-normal; - font-family: $font-regular; - } - } -} - - -@media (min-width: 768px) and (max-width: 1440px) { - article { - h1, .h1 { - font-size: 50px; - font-weight: $fw-semibold; - line-height: 42px; - word-break: break-word; - } - - h2, .h2 { - font-size: 40px; - font-weight: $fw-semibold; - line-height: 40px; - } - - h3, .h3 { - font-size: 30px; - font-weight: $fw-normal; - line-height: 28px; - } - - h4, .h4 { - font-size: 21px; - font-weight: $fw-bold; - line-height: 24px; - } - - h5, .h5 { - font-size: 13px; - line-height: 1.231em; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.05em; - } - - &:not(.api-reference) > p:first-child, - &:not(.api-reference) h1 + p { - font-size: 18px; - line-height: 22px; - font-weight: $fw-normal; - font-family: $font-regular; - } -} -} - -@media (max-width: 1444px) { - .feedback-ab { - .feedback-ab-submit-button-container { - width: 30%; - } - } -} - -/* Overrides the default which is from width 1240px, because to match our side-navigation behavior. */ -@media only screen and (min-width: 768px) { - nav.TK-Nav { - position: sticky; - position: -webkit-sticky; - top: 0; - transform: translateZ(0); - -webkit-transform: translateZ(0); - } - - .SiteRibbon { - position: sticky; - - + .PRGS-PairNav { - top: 64px; - } - } -} - -@media (min-width: 768px) { /* Styles for width >= 768px */ - span.all-components-expanded-icon { - display: none; - } - - #navbar { - select { - display: none; - } - - .scroll & { - display: none; - } - - .main-menu { - float: right; - position: relative; - display: inline-block; - } - - a { - font-size: 12px; - padding: 0px 7px 0; - } - - .navbar-brand { - display: none; - } - } - - .navbar-header { - position: absolute; - } - - .navbar-fixed-top { - padding: 0 15px; - } - - .all-components { - display: none; - } - - .side-nav { - display: block; - padding-bottom: 40px; - position: fixed; - - &.affix { - position: fixed; - } - - &.show-components { - border-left-width: 1px; - border-right-width: 1px; - top: 0px !important; - - .side-title { - padding-left: 30px; - } - - > ul > li.expanded { - &::before, - &::after { - left: 30px; - } - } - - > ul > li > ul > li > ul > li a, - > ul > li > ul > li > ul > li.expanded > a { /* Exapnded link in Level 3 / Title of Level 4 */ - padding-left: 40px; - } - - > ul > li > ul > li > ul > li > ul > li a { - padding-left: 60px; - } - } - } - - a.k-pager-nav { - float: left; - } - - .k-pager-numbers + a.k-pager-nav { - float: right; - } - - .version-picker { - float: right; - text-align: right; - margin-top: -21px !important; - } - - .copyright { - text-align: left; - } - - .social-icons { - text-align: right; - } - - article { - ul, ol { - padding: 0 0 0 12px; - } - } - - .api-index.api-columns ul { - column-count: 2; - } -} - -/* ####################################################################################################### */ - -@media (min-width: 1025px) { /* Styles for width > 1024px */ - #navbar { - a { - font-size: 13px; - padding: 1px 10px 0; - } - - .navbar-brand { - margin-left: 31%; - width: 160px; - display: block; - - .scroll & { - width: 230px; - background-position: 0 8px; - margin-left: 0; - - a { - font-size: 15px; - } - } - } - } - - .component-item { - .highlights & { - h2 { - font-size: 2em; - } - } - } - - /* Package Components Overview List */ - .components-overview-list { - a { - min-height: 190px; - } - } -} - -/* ####################################################################################################### */ - -@media (min-width: 1199px) { /* Styles for width > 1199px */ - .component-item { - padding-left: 0; - padding-top: 36px; - - .highlights & { - h2 { - font-size: 1.6em; - } - - .component-icon { - top: 0; - } - } - } - - .component-icon { - top: 0px; - - > svg { - vertical-align: bottom; - } - } - - .nav-container { - .scroll & { - width: 100%; - margin-left: 0; - } - } - - #navbar { - .navbar-brand { - width: 220px; - margin-left: 8.33%; - } - - a { - font-size: 15px; - } - } -} - -/* ####################################################################################################### */ - -@media (min-width: 1441px) { /* Styles for width > 1440px */ - .feedback-ab { - .vote-buttons-container { - width: 33%; - } - } - - .side-nav { - font-size: 16px; - - ul { - font-size: 16px; - } - - #page-tree > .k-group > .k-item, - #page-tree-api > .k-group > .k-item { - > div { - .k-in, span > a { - font-weight: 500; - font-size: 16px; - } - } - } - } - - .components { - font-size: 16px; - } - - .article-toc, .related-articles, .feedback-ab { - .anchor-h1, - .anchor-h2 { - font-family: $font-medium; - font-size: 16px; - } - } - - .article-toc, .feedback-ab { - .layout-components &.affix-top { - top: 170px; - } - } - - .feedback-ab ~ .article-toc { - .layout-components &.affix-top { - top: 270px; - } - } - - .api-index.api-columns ul { - column-count: 3; - } -} - -/* ####################################################################################################### */ - -@media (min-width: 1601px) { /* Styles for width > 1600px */ - #navbar { - a { - font-size: 12px; - padding: 1px 7px 0; - } - - .main-menu { - margin-right: -8px; - } - } - - .navbar > .container-fluid .navbar-brand { - margin-left: -7px; - } - - .nav-container { - width: 83.33333333%; - margin-left: 8.33333333%; - - .scroll & { - width: 83.33333333%; - margin-left: 8.33333333%; - } - } - - #navbar { - .navbar-brand { - width: 220px; - margin-left: 0; - - .scroll & { - margin-left: 0; - } - } - } - - .global-search { - right: 90px; - } - - .col-xl-offset-0 { - margin-left: 0; - } - - .col-xl-offset-1 { - margin-left: 8.33333333%; - } - - .col-xl-offset-2 { - margin-left: 16.66666667%; - } - - .col-xl-8 { - width: 66.66666667%; - float: left; - } - - .col-xl-10 { - width: 83.33333333%; - float: left; - } - - .component-item { - padding-left: 36px; - padding-top: 0; - - .highlights & { - h2 { - font-size: 2.5em; - } - - .component-icon { - top: 9px; - } - } - } - - .component-icon { - top: 2px; - - > svg { - vertical-align: top; - } - } -} - -/* ####################################################################################################### */ - -@media (min-width: 1801px) { /* Styles for width > 1800px */ - #navbar { - a { - font-size: 15px; - padding: 1px 10px 0; - } - } - - .global-search { - right: 100px; - } - - body, - article, - blockquote, - #results > div { - font-size: 16px; - } -} - -@media (min-width: 1200px) { - .auto-clear .col-lg-1:nth-child(12n+1) { - clear: left; - } - - .auto-clear .col-lg-2:nth-child(6n+1) { - clear: left; - } - - .auto-clear .col-lg-3:nth-child(4n+1) { - clear: left; - } - - .auto-clear .col-lg-4:nth-child(3n+1) { - clear: left; - } - - .auto-clear .col-lg-6:nth-child(odd) { - clear: left; - } -} - -@media (min-width: 992px) and (max-width: 1199px) { - .auto-clear .col-md-1:nth-child(12n+1) { - clear: left; - } - - .auto-clear .col-md-2:nth-child(6n+1) { - clear: left; - } - - .auto-clear .col-md-3:nth-child(4n+1) { - clear: left; - } - - .auto-clear .col-md-4:nth-child(3n+1) { - clear: left; - } - - .auto-clear .col-md-6:nth-child(odd) { - clear: left; - } -} - -@media (min-width: 768px) and (max-width: 991px) { - .auto-clear .col-sm-1:nth-child(12n+1) { - clear: left; - } - - .auto-clear .col-sm-2:nth-child(6n+1) { - clear: left; - } - - .auto-clear .col-sm-3:nth-child(4n+1) { - clear: left; - } - - .auto-clear .col-sm-4:nth-child(3n+1) { - clear: left; - } - - .auto-clear .col-sm-6:nth-child(odd) { - clear: left; - } -} - -@media (max-width: 767px) { - .auto-clear .col-xs-1:nth-child(12n+1) { - clear: left; - } - - .auto-clear .col-xs-2:nth-child(6n+1) { - clear: left; - } - - .auto-clear .col-xs-3:nth-child(4n+1) { - clear: left; - } - - .auto-clear .col-xs-4:nth-child(3n+1) { - clear: left; - } - - .auto-clear .col-xs-6:nth-child(odd) { - clear: left; - } -} - -/* Modificators */ - -.mt-0 { - margin-top: 0px !important; -} - -.mt-5 { - margin-top: 5px !important; -} - -.mt-10 { - margin-top: 10px !important; -} - -.mt-20 { - margin-top: 20px !important; -} - -.mt-30 { - margin-top: 30px !important; -} - -.mt-40 { - margin-top: 40px !important; -} - -.mt-50 { - margin-top: 50px !important; -} - -.mt-60 { - margin-top: 60px !important; -} - -.mt-70 { - margin-top: 70px !important; -} - -.mt-80 { - margin-top: 80px !important; -} - -.mt-90 { - margin-top: 90px !important; -} - -.mt-100 { - margin-top: 100px !important; -} - -.mb-0 { - margin-bottom: 0px !important; -} - -.mb-5 { - margin-bottom: 5px !important; -} - -.mb-10 { - margin-bottom: 10px !important; -} - -.mb-20 { - margin-bottom: 20px !important; -} - -.mb-30 { - margin-bottom: 30px !important; -} - -.mb-40 { - margin-bottom: 40px !important; -} - -.mb-50 { - margin-bottom: 50px !important; -} - -.mb-60 { - margin-bottom: 60px !important; -} - -.mb-70 { - margin-bottom: 70px !important; -} - -.mb-80 { - margin-bottom: 80px !important; -} - -.mb-90 { - margin-bottom: 90px !important; -} - -.mb-100 { - margin-bottom: 100px !important; -} - -.pt-0 { - padding-top: 0px !important; -} - -.pt-5 { - padding-top: 5px !important; -} - -.pt-10 { - padding-top: 10px !important; -} - -.pt-20 { - padding-top: 20px !important; -} - -.pt-30 { - padding-top: 30px !important; -} - -.pt-40 { - padding-top: 40px !important; -} - -.pt-50 { - padding-top: 50px !important; -} - -.pt-60 { - padding-top: 60px !important; -} - -.pt-70 { - padding-top: 70px !important; -} - -.pt-80 { - padding-top: 80px !important; -} - -.pt-90 { - padding-top: 90px !important; -} - -.pt-100 { - padding-top: 100px !important; -} - -.pb-0 { - padding-bottom: 0px !important; -} - -.pb-5 { - padding-bottom: 5px !important; -} - -.pb-10 { - padding-bottom: 10px !important; -} - -.pb-20 { - padding-bottom: 20px !important; -} - -.pb-30 { - padding-bottom: 30px !important; -} - -.pb-40 { - padding-bottom: 40px !important; -} - -.pb-50 { - padding-bottom: 50px !important; -} - -.pb-60 { - padding-bottom: 60px !important; -} - -.pb-70 { - padding-bottom: 70px !important; -} - -.pb-80 { - padding-bottom: 80px !important; -} - -.pb-90 { - padding-bottom: 90px !important; -} - -.pb-100 { - padding-bottom: 100px !important; -} - -.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, -.col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, -.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, -.col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { - min-height: 0; -} - -.k-loading-mask { /* stop search results from "jumping" */ - display: none; -} - -.coming-soon { - opacity: 0.5; - cursor: default; - - a, - h2 > a:hover, - h2 > a:active { - cursor: default; - color: inherit; - } -} - -pre { - margin: 5px 0 20px; - padding: 15px; - overflow: auto; - background-color: #f8f8f8; - border: 1px solid #ececec; - border-radius: 0; - -webkit-transform: translateZ(0); - - &.preview, - &.preview + pre, - &.preview + pre + pre { - display: none; - - .no-js &, - &[data-code-language] { - display: block; - } - } - - &:hover .copy-btn { - display: block; - } - - &.language-html, - &.language-jsx { - margin: 0 0 10px; - border-radius: 0; - background-color: #fff; - border: 1px solid #ececec; - clear: both; - } - - .file-list & { - padding: 0; - } -} - -.copy-btn { - position: absolute; - top: 6px; - right: 4px; - z-index: 2; - color: $link-color; - display: none; - border-width: 0; - border-radius: 0; - font-family: $font-regular; - font-size: 13px; - line-height: 1.2; - padding-left: 25px; - text-transform: uppercase; - background: #fff url(image_path("copy.svg")) no-repeat 5px 50%; - - &:hover, - &:active, - &:focus { - color: $link-color; - outline: 0; - background: #fff url(image_path("copy.svg")) no-repeat 5px 50%; - box-shadow: none; - } - - &:active:focus { - color: $link-hover-color; - outline: 0; - } - - .file-list & { - right: 0; - padding-right: 0; - } -} - -code { - display: inline-block; - margin: 0 1px; - padding: 0 5px 0 4px; - color: inherit; - word-break: normal; - background-color: #ededed; - font-family: inherit; - font-size: 90%; - line-height: 1.40em; - letter-spacing: 0; - text-transform: none; - border: 0; - border-radius: 0; - - a & { - color: $accent; - } - - a:hover &, - a:focus &, - a:active & { - color: $link-hover-color; - text-decoration: underline; - } - - blockquote & { - color: $link-color; - } - - blockquote { - a & { - color: $accent; - } - - a:hover &, - a:focus &, - a:active & { - text-decoration: none; - } - } - - pre & { - font-family: $font-code; - font-size: 12px; - line-height: 1.3; - box-shadow: none; - } -} - -.api-index { - padding-top: 60px; - padding-bottom: 60px !important; - - li { - overflow: hidden; - text-overflow: ellipsis; - } - - &.api-columns .col-xs-w { - width: 100% !important; - } -} - -.symbol { - width: 24px; - height: 24px; - text-indent: -1px; - border: 2px solid currentColor; - text-align: center; - line-height: 19px; - letter-spacing: normal; - font-size: 13px; - font-weight: 900; - top: -2px; - left: -34px; - - &::after { - content: ""; - display: block; - height: 5px; - width: 5px; - position: absolute; - bottom: -2px; - right: -2px; - background-color: #f8f8f8; - background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), rgba(0, 0, 0, 0) calc(50% + 1px), rgba(0, 0, 0, 0) 100%); - } -} - -.symbol-const { - color: #9575cd; -} - -.symbol-const:before { - content: 'K'; -} - -.symbol-decorator { - color: #0262C2; -} - -.symbol-decorator:before { - content: '@'; -} - -.symbol-directive { - color: #db4437; -} - -.symbol-directive:before { - content: 'D'; -} - -.symbol-class { - color: #4285f4; -} - -.symbol-class:before { - content: 'C'; -} - -.symbol-component { - color: #db4437; -} - -.symbol-component:before { - content: 'C'; -} - -.symbol-constant { - color: #9575cd; -} - -.symbol-constant:before { - content: 'K'; -} - -.symbol-interface { - color: #0097a7; -} - -.symbol-interface:before { - content: 'I'; -} - -.symbol-function { - color: #0f9d58; -} - -.symbol-function:before { - content: 'F'; -} - -.symbol-union { - color: #757575; -} - -.symbol-union:before { - content: 'U'; -} - -.symbol-enumeration { - color: #757575; -} - -.symbol-enumeration:before { - content: 'E'; -} - -.registration-form { - width: 543px; - height: 730px; - padding: 0px 80px; - margin-left: auto; - margin-right: auto; - margin-top: 20px; - - h4 { - margin-top: 0px; - } - - iframe { - width: 100%; - height: 640px !important; - border: 0; - } -} - -/* START TabStrip styles */ - -.k-tabstrip { - margin: 0; - padding: 0; - zoom: 1; - position: relative; -} - -.k-tabstrip-items { - padding: 0.3em 0.3em 0; -} - -.k-tabstrip-scrollable .k-tabstrip-items { - white-space: nowrap; - overflow: hidden; -} - -.k-tabstrip > .k-button.k-bare { - position: absolute; - top: .27em; - z-index: 2; - user-select: none; -} - -.k-tabstrip-bottom > .k-button.k-bare { - top: auto; - bottom: .15em; -} - -.k-tabstrip-prev { - left: .4em; -} - -.k-tabstrip-next { - right: .4em; -} - -.k-tabstrip-items .k-item, -.k-panelbar .k-tabstrip-items .k-item { - list-style-type: none; - display: inline-block; - position: relative; - border-style: solid; - border-width: 1px 1px 0; - padding: 0; - vertical-align: top; -} - -.k-tabstrip-items .k-item { - overflow: hidden; -} - -.k-tabstrip-items .k-tab-on-top, -.k-tabstrip-items .k-state-active, -.k-panelbar .k-tabstrip-items .k-state-active { - margin-bottom: -1px; - padding-bottom: 1px; -} - -.k-tabstrip-top > .k-tabstrip-items .k-item, -.k-panelbar .k-tabstrip-items .k-item { - margin: 0 -1px 0 0; -} - -.k-tabstrip-top > .k-tabstrip-items .k-state-active, -.k-panelbar .k-tabstrip-top > .k-tabstrip-items .k-state-active { - border-bottom-width: 1px; - margin-bottom: -1px; - padding-bottom: 0px; -} - -.k-tabstrip-items .k-tab-on-top { - z-index: 1; -} - -.k-tabstrip-items .k-link, -.k-panelbar .k-tabstrip-items .k-link { - display: inline-block; - border-bottom-width: 0; - padding: .5em .92em; -} - -.k-tabstrip-items .k-icon, -.k-panelbar .k-tabstrip-items .k-icon { - margin: -1px 4px 0 -3px; - vertical-align: top; -} - -.k-tabstrip-items .k-item .k-image, -.k-tabstrip-items .k-item .k-sprite, -.k-panelbar .k-tabstrip-items .k-item .k-image, -.k-panelbar .k-tabstrip-items .k-item .k-sprite { - margin: -3px 3px 0 -6px; - vertical-align: middle; -} - -// TabStrip Loading Progress -.k-tabstrip-items .k-loading { - top: 0; - left: 0; - height: 0; - width: 20%; - position: absolute; - background: transparent; - border-top: 1px solid transparent; - border-color: inherit; -} - -.k-tabstrip-items .k-loading.k-complete { - width: 100%; -} - -.k-tabstrip > .k-content, -.k-panelbar .k-tabstrip > .k-content { - position: static; - border-style: solid; - border-width: 1px; - margin: 0 .286em .3em; - padding: .92em; - zoom: 1; -} - -.k-tabstrip > .k-content { - display: none; - overflow: auto; -} - -.k-tabstrip > .k-content.km-scroll-wrapper { - padding: 0; -} - -.k-tabstrip > .k-content > .km-scroll-container { - padding: .3em .92em; -} - -@keyframes k-tab-loader { - 0% { - left: 0; - } - - 50% { - left: 80%; - } - - 100% { - left: 0; - } -} - -// left and right tabs - -.k-tabstrip-left > div.k-content, -.k-tabstrip-right > div.k-content { - margin: .286em .3em; -} - -.k-tabstrip-left > .k-tabstrip-items .k-item, -.k-tabstrip-right > .k-tabstrip-items .k-item { - display: block; - margin-bottom: -1px; -} - -.k-tabstrip-left > .k-tabstrip-items .k-link, -.k-tabstrip-right > .k-tabstrip-items .k-link { - display: block; -} - -.k-tabstrip-left > .k-tabstrip-items .k-tab-on-top, -.k-tabstrip-right > .k-tabstrip-items .k-tab-on-top, -.k-tabstrip-left > .k-tabstrip-items .k-state-active, -.k-tabstrip-right > .k-tabstrip-items .k-state-active, -.k-panelbar .k-tabstrip-left > .k-tabstrip-items .k-state-active, -.k-panelbar .k-tabstrip-right > .k-tabstrip-items .k-state-active { - margin-bottom: -1px; - padding-bottom: 0; -} - -// left tabs - -.k-tabstrip-left > .k-tabstrip-items { - float: left; - padding: .25em 0 .3em .3em; -} - -.k-tabstrip-left > .k-tabstrip-items .k-item { - border-width: 1px 0 1px 1px; - border-radius: 3px 0 0 3px; -} - -.k-tabstrip-left > .k-tabstrip-items .k-state-active { - border-width: 1px 0 1px 1px; -} - -.k-tabstrip-left > .k-tabstrip-items .k-tab-on-top, -.k-tabstrip-left > .k-tabstrip-items .k-state-active, -.k-panelbar .k-tabstrip-left > .k-tabstrip-items .k-state-active { - margin-right: -1px; - padding-right: 1px; -} - -// right tabs - -.k-tabstrip-right > .k-tabstrip-items { - float: right; - padding: .25em .3em .3em 0; -} - -.k-tabstrip-right > .k-tabstrip-items .k-item { - border-width: 1px 1px 1px 0; - border-radius: 0 3px 3px 0; -} - -.k-tabstrip-right > .k-tabstrip-items .k-state-active { - border-width: 1px 1px 1px 0; -} - -.k-tabstrip-right > .k-tabstrip-items .k-tab-on-top, -.k-tabstrip-right > .k-tabstrip-items .k-state-active, -.k-panelbar .k-tabstrip-right > .k-tabstrip-items .k-state-active { - margin-left: -1px; - padding-left: 1px; -} - -// bottom tabs - -.k-tabstrip-bottom > .k-tabstrip-items { - margin-top: -1px; - padding: 0 .3em .3em; -} - -.k-tabstrip-bottom > .k-content, -.k-panelbar .k-tabstrip-bottom > .k-content { - margin: .3em .286em 0; - z-index: 1; - position: relative; -} - -.k-tabstrip-bottom > .k-tabstrip-items .k-item { - border-width: 0 1px 1px; - border-radius: 0 0 4px 4px; -} - -.k-tabstrip-bottom > .k-tabstrip-items .k-state-active { - margin-bottom: 0; - padding-bottom: 0; -} - -.k-tabstrip-bottom > .k-content { - min-height: 100px; -} - -.k-tabstrip-bottom > .k-tabstrip-items .k-loading { - top: auto; - bottom: 0; -} - -.k-tabstrip-wrapper { - background-color: #f8f8f8; - margin-bottom: 20px; - - ul { - margin-top: 0 !important; - } -} - -.k-tabstrip { - border: 1px solid #ebecee; - - .k-item, - .k-link, - .k-content, - .k-content pre, - .k-loading { - border: 0; - } - - .k-tabstrip-items { - background: #f5f7f8; - - .k-state-active .k-link { - font-weight: bold; - color: #000; - } - } - - .k-content { - background: #f8f8f8; - max-height: 40vh; - } - - .k-tabstrip-items { - .k-state-active { - background: white; - } - - .k-item { - font-weight: bold; - } - } - - .prettyprint { - padding: 0; - } -} - -.prettyprint { - border-color: #ebecee; -} - -.prettyprint code { - line-height: 1.4; -} - -/* END TabStrip styles */ - -/* START Introduction page all controls table styles */ - -article #allcontrols-table { - border: none; - word-wrap: break-word; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - overflow-wrap: break-word; - font-size: 15px; - margin: 15px 0 20px; - - .row { - margin-left: -15px; - margin-right: -15px; - font-size: 0; - } - - .column { - position: relative; - display: inline-block; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; - font-size: 16px; - vertical-align: top; - - // X-Small devices (portrait phones, less than 576px) - @media (max-width: 575.98px) { width: 100%; } - - @media (min-width: 576px) { width: 50%; } - - @media (min-width: 768px) { width: 33%; } - - @media (min-width: 1200px) { width: 25%; } - } - - ul { - list-style: none; - padding: 5px 0px; - margin: 0; - - li { - padding: 5px 0px; - } - } - - .control-category { - color: $accent; - text-transform: uppercase; - font-size: 20px; - font-weight: bold; - padding: 3px 0px; - } - - ul:not(.docs-tabstrip) li:before { - background-color: transparent !important; - } -} - -/* END Introduction page all controls table styles */ - -/* Kendo loading indicator in API*/ -div#sidetoc { - .k-loading-mask { - background-image: url(image_path("loading-image.gif")); - background-repeat: no-repeat; - z-index: 10000; - background-position-x: center; - background-position-y: center; - } - - .k-loading-text { - display: none; - } -} - -div { - &.k-content { - &.k-state-active { - .copy-code-btn { - padding: 7px 10px; - } - } - } -} - -.copy-code-btn { - position: absolute; - top: 0; - right: 0; - padding: 10px; - z-index: 100; - - &:hover { - cursor: pointer; - } -} - -/* CTA Panels styles */ - -/* Make sure CTA avatars are included */ -.kd-Kendoka-avatar { - background: url(image_path("Avatar-Kendoka-big.svg")) no-repeat 50% 50%; -} - -.kd-DevCraft-avatar { - background: url(image_path("Avatar-DevCraft-big.svg")) no-repeat 50% 50%; -} - -.kd-Ninja-avatar { - background: url(image_path("Avatar-Ninja-big.svg")) no-repeat 50% 50%; -} - -.kd-cta { - padding: 15px 30px; - margin-top: 32px; - display: inline-flex; - align-items: center; - border-width: 1px; - border-style: solid; - border-color: #5777EA; - border-radius: 2px -} - -.kd-cta-panel .container{ - width: auto; -} - -.kd-cta-panel.cta-small { - text-align: center; -} - -.kd-cta-content-wrapper { - display: flex; - -ms-flex-direction: row; - align-items: center -} - -.kd-cta-image { - margin-right: 30px -} - -.kd-cta-image img { - width: 50px; - margin: 0; -} - -h5.kd-cta-title { - margin-top: 0; - margin-bottom: 5px; - font-size: 28px; - font-weight: 700; - text-transform: none; -} - -.kd-cta-title { - margin-bottom: 5px -} - -.kd-cta-button-wrapper { - flex: none; - margin-left: 50px -} -.kd-button-primary { - background-color: #F46147; - color: #fff; - border-color: transparent; -} -.kd-button-md { - padding: 5px 24px; - font-weight: 400; - font-size: 19px; - line-height: 32px; -} -.kd-button { - display: inline-block; - border-radius: 2px; - text-align: center; - cursor: pointer; - text-decoration: none; - border-width: 2px; - border-style: solid; - transition: color .2s ease,background-color .2s ease,border-color .2s ease; -} -.kd-cta-lg { - padding: 16px 28px; - width: 1000px; - max-width: 100% -} - -.kd-cta-full-width { - width: 100% -} - -.kd-cta-lg .kd-cta-image img { - width: 100px -} - -.kd-cta-title-desc { - flex: 1 0 0 -} - -.kd-cta .kd-link { - font-weight: 700 -} - -.kd-cta-sm { - padding: 11px 32px -} - -.kd-cta-sm .kd-link,.kd-cta-sm .kd-text { - margin: 0; - font-weight: 500; - font-size: 28px -} - -.kd-cta-sm .kd-text { - color: #1F1F1F -} - -@media only screen and (max-width: 1440px) { - h5.kd-cta-title { - font-size:18px; - line-height: 22px - } -} - -@media (max-width: 1064px) { - .kd-cta,.kd-cta-content-wrapper { - display:block; - } - - .kd-cta-image { - margin-right: 0; - margin-bottom: 20px - } +@import './styles-layout'; - .kd-cta-button-wrapper { - margin-left: 0; - margin-top: 20px - } +@import './thememode/variables-dark'; - .kd-cta:not(.kd-cta-lg) .kd-cta-image { - display: none - } +[data-is-dark='true'] { + @import './thememode/styles-themes'; } -/* END CTA Panels styles*/ diff --git a/_assets/css/api.scss b/_assets/css/api.scss index be887a4..4f99145 100644 --- a/_assets/css/api.scss +++ b/_assets/css/api.scss @@ -13,16 +13,6 @@ body { } } -.additional-content-column{ - &.affix { - margin-top: 160px; - } - - &.affix-top { - top: 60px; - } -} - article.api-reference { ul, ol { padding: 0 0 0 2px; @@ -119,10 +109,6 @@ article.api-reference { } } -#navbar { - padding-top: 60px; -} - @media (min-width: 1601px) { #navbar { .navbar-brand { @@ -255,17 +241,6 @@ h2 a:first-child + a code:before { margin-bottom: 6px; font-weight: 500; - &:after { - position: absolute; - top: 2px; - left: -8px; - height: 0; - width: 0; - content: ""; - border: 2px solid #fff; - border-color: #fff #fff transparent transparent; - } - &:before { position: absolute; width: 14px; @@ -323,6 +298,15 @@ h2 a:first-child + a code:before { #api-filter { margin: 30px 0; width: 270px; + position: relative; + + svg { + position: absolute; + left: 10px; + top:50%; + margin-top: -8px; + z-index: 2; + } .search { padding: 7px 5px 7px 35px; @@ -337,25 +321,24 @@ h2 a:first-child + a code:before { color: #b8b8b8; } - input[type="search"] { + input { border-radius: 1px; border-width: 1px; border-style: solid; border-color: #b8b8b8; - background-image: url(image_path("search.svg")); background-repeat: no-repeat; background-position: 10px 50%; background-size: 16px; } - input[type="search"]:focus { + input:focus { outline: none; } - input[type="search"]::-webkit-search-decoration, - input[type="search"]::-webkit-search-cancel-button, - input[type="search"]::-webkit-search-results-button, - input[type="search"]::-webkit-search-results-decoration { + input::-webkit-search-decoration, + input::-webkit-search-cancel-button, + input::-webkit-search-results-button, + input::-webkit-search-results-decoration { display: none; } } diff --git a/_assets/css/dojo.scss b/_assets/css/dojo.scss index 6f3e151..52ad0de 100644 --- a/_assets/css/dojo.scss +++ b/_assets/css/dojo.scss @@ -1,67 +1,7 @@ -.action-buttons { - margin-top: 12px; - border: 1px solid #e8ebef; - border-bottom: 0; - background-color: #fefefe; +@import './dojo-layout'; - .btn { - margin: 0; - padding: .72em 1.5em; - border: 0; - border-radius: 0; - line-height: 1.2em; - outline: none; - background-color: transparent; - color: #333; - border-width: 0; - border-right: 1px solid #e8ebef; - font-size: 14px; +@import './thememode/variables-dark'; - &:hover { - text-decoration: none; - background-color: #e8ebef; - color: #000; - } - } - - + pre { - margin-top: 0; - } - - .active-button, - .active-button:hover { - background-color: #e8ebef; - color: #333; - } - - .btn-dojo { - float: right; - border-right: 0; - border-left: 1px solid #e8ebef; - padding-left: 2.7em; - background: transparent url(image_path("external.png")) no-repeat 1.4em 50%; - } -} - -.CodeMirror { - clear: both; - border: 1px solid #ebecee; - height: auto !important; - font-family: "Metric Mono", "Ubuntu Mono", "Consolas", "Monaco", monospace; - - pre { - font-family: "Metric Mono", "Ubuntu Mono", "Consolas", "Monaco", monospace !important; - } -} - -.CodeMirror-code { - line-height: 18px; - font-size: 13px; -} - -.snippet-runner { - border: 1px solid #ebecee; - width: 100%; - min-height: 450px; - box-sizing: border-box; +[data-is-dark='true'] { + @import './thememode/dojo-themes'; } diff --git a/_assets/css/thememode/_dojo-themes.scss b/_assets/css/thememode/_dojo-themes.scss new file mode 100644 index 0000000..868d5c2 --- /dev/null +++ b/_assets/css/thememode/_dojo-themes.scss @@ -0,0 +1,34 @@ +@import "variables-template"; + +.action-buttons { + border-color: $border-color; + background-color: $bg-tertiary; + + .btn, + .btn-dojo { + color: $text-headline; + border-color: $border-color; + + &:hover { + color: $text-headline; + background-color: $menu-hover-bg; + } + } + + .active-button { + background-color: $menu-hover-bg; + } + +} + +.CodeMirror { + border-width: 2px; + border-style: dashed; + border-color: $border-color; + background-color: $bg-secondary; + + &, + .CodeMirror { + color: $text-secondary; + } +} diff --git a/_assets/css/thememode/_mixins.scss b/_assets/css/thememode/_mixins.scss new file mode 100644 index 0000000..893f45f --- /dev/null +++ b/_assets/css/thememode/_mixins.scss @@ -0,0 +1,3 @@ +@mixin opacity($property, $color, $opacity) { + #{$property}: rgba($color, $opacity); +} diff --git a/_assets/css/thememode/_styles-themes.scss b/_assets/css/thememode/_styles-themes.scss new file mode 100644 index 0000000..ffc2553 --- /dev/null +++ b/_assets/css/thememode/_styles-themes.scss @@ -0,0 +1,484 @@ +@import "variables-template"; +@import 'mixins'; + +body { + color: $text-secondary; + background-color: $bg-tertiary; +} + +h1, +.h1, +h2, +.h2, +h3, +h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { + color: $text-headline; +} + +pre { + border-color: $border-color; + background-color: $bg-primary; +} + +.content-wrapper { + a { + color: $hyperlink-text; + + &:hover { + color: $hyperlink-hover-text; + } + } + + h1, + h2, + h3 { + a { + color: inherit; + } + } +} + + +#navbar { + background-color: $bg-secondary; + backdrop-filter: $header-filter; + box-shadow: $header-shadow; + + + .switch-btn { + border-color: $border-color; + background-color: $bg-primary; + box-shadow: $button-switch-shadow; + + .switch-icon { + background-image: $icon-switcher-url; + } + } + + .all-components { + color: $hyperlink-text + } +} + +.search-input-container { + + svg path { + fill: $hyperlink-text; + } + + input { + color: $text-headline; + border-color: $bg-secondary; + background-color: $bg-secondary; + + &::placeholder { + color: $text-disabled; + } + + &:hover, + &:focus, + &:active { + border-color: $border-color; + background-color: $bg-primary; + + &::placeholder { + color: $text-headline; + } + } + + &:-webkit-autofill { + -webkit-box-shadow: 0 0 0 50px $bg-primary inset; + -webkit-text-fill-color: $text-headline; + } + } + +} + +a.kd-button-primary { + color: $text-primary; +} + +#refine-search-button { + color: inherit; +} + +#refine-search-popup { + + ul { + border-color: $border-color; + color: $text-headline; + background-color: $bg-secondary; + } + + li:hover { + background-color: $menu-hover-bg; + } + + .k-icon { + color: inherit; + } +} + +.side-nav { + @include opacity("border-color", $text-headline, .2); + color: $text-headings; + background-color: $bg-tertiary; + + a { + color: inherit; + } + + .k-treeview > .k-group > .k-item > div, + #page-tree-api > .k-group > .k-item > div { + @include opacity("border-color", $text-headings, .2); + } + + .k-treeview, + #page-tree-api { + + > .k-group > .k-item { + > div { + @include opacity("border-color", $text-headings, .2); + } + + div { + > .k-icon { + &.k-i-expand, + &.k-i-collapse { + background-image: $icon-treeview-e-url; + } + &.k-i-collapse { + transform: rotate(90deg); + } + + &.k-i-expand { + -webkit-transform: none; + transform: none; + } + } + } + + } + } + + .k-state-selected { + + &, + a:hover { + background-color: transparent; + } + } + + .k-state-hover, + .k-item > div:hover, + .k-state-selected:hover { + background-color: $menu-hover-bg; + } + + &::-webkit-scrollbar { + background: $bg-primary; + } + + &::-webkit-scrollbar-thumb { + @include opacity("background", $hyperlink-text, .8); + + &:hover { + background: $hyperlink-text; + } + } + + &::-webkit-scrollbar-button { + background-repeat: no-repeat; + background-position: center; + + &:vertical:start { + background-image: $icon-scrollbar-arrow-n-url; + } + + &:vertical:end { + background-image: $icon-scrollbar-arrow-s-url; + } + } +} + +.side-nav-secondary { + color: $text-headline; + + .article-toc a, + .side-title, + .additional-info-content { + color: inherit; + } + + .btn-edit-article { + color: $hyperlink-text; + + &:hover { + color: $hyperlink-hover-text; + } + } +} + +.article-toc, +.related-articles, +.feedback-ab { + border-color: $border-color; + + a { + color: $hyperlink-text; + + &:hover { + color: $accent; + } + } +} + +a.btn-contact-support { + color: $border-color; + border-color: $border-color; + + &:hover { + color: $bg-tertiary; + background-color: $border-color; + } +} + +.kd-cta { + border-color: $border-color; +} + +.kd-cta-sm .kd-text { + color: $text-headings; +} + +article { + + h1, h2, h3, h4, h5, h6 { + a{ + color: $text-headings; + } + } + + table { + border-color: $border-color; + + tr { + background-color: $bg-primary; + } + + th { + color: $text-headings; + background-color: $bg-primary; + border-bottom-color: $text-headline; + } + + tr:nth-child(odd), + tr:nth-child(2n+1) td { + background-color: $bg-secondary; + } + } + +} + +.k-tabstrip { + border-color: $border-color; + background-color: $bg-secondary; + + .k-tabstrip-items { + color: $text-headings; + border-color: $border-color; + background-color: $bg-tertiary; + + .k-state-active { + color: $text-headings; + background-color: $menu-hover-bg; + } + } + + .copy-code-btn { + polygon, + path { + fill: $text-headings; + } + + } +} + +div.caption { + color: $text-headline; +} + +#api-filter { + + path { + fill: $hyperlink-text; + } + + input { + border-color: $border-color; + background-color: $bg-tertiary; + + &:hover, + &:focus { + background-color: $bg-primary; + } + + &::placeholder { + color: $text-disabled; + } + } +} + +.snippet-runner { + border-style: dashed; + border-color: $border-color; + background-color: $bg-secondary; + box-shadow: none; +} + +code { + color: $hyperlink-text; + background-color: $bg-primary; +} + +.prettyprint { + border-color: $border-color; + + &, + code { + color: $text-secondary; + background-color: $bg-secondary; + } + + .copy-code-btn { + fill: $text-headline; + } + + .dec, + .tag, + .atn { + color: inherit; + } + + .pun { + color: $hyperlink-text; + } + + .pln, + .typ { + color: $text-headline; + } + + .com { + color: #cc66ff; + } + + .lit { + color: #0099FF; + } + + .kwd { + color: #FF3399; + } + + .str { + color: #2DB245; + } + +} + +blockquote { + border-color: #FFC000; + color: $text-headline; + background-color: $bg-secondary; + + + &:not(.alert-note) a, + &:not(.alert-note) a:link { + color: $hyperlink-text; + + &:hover { + color: $hyperlink-hover-text; + } + } +} + +#results { + border-top-color: $border-color; + + p { + color: inherit; + } +} + +.go-back path { + fill: currentColor; +} + +.site-pager { + .k-pager-numbers li a, + .k-pager-numbers li span, + a.k-pager-nav { + color: $hyperlink-text; + } + + .k-pager-numbers li { + a:hover, + a:focus { + background-color: $bg-primary; + } + + .k-state-selected { + border-color: $border-color; + background-color: $bg-primary; + } + } + + a.k-pager-nav { + &:hover, + &:focus { + background-color: $bg-primary; + } + } +} + +div#footer { + color: $text-secondary; + border-color: $border-color; + background-color: $bg-primary; + + h6 { + color: inherit; + } + + a { + color: $text-headings; + + &:hover { + color: $hyperlink-hover-text; + } + } + + p { + color: inherit; + } + + .progress-logo { + path:nth-child(2) { + fill: $text-headings; + } + } + + .social-icon path { + fill: $text-headings; + } +} + + + diff --git a/_assets/css/thememode/_variables-dark.scss b/_assets/css/thememode/_variables-dark.scss new file mode 100644 index 0000000..5c01d75 --- /dev/null +++ b/_assets/css/thememode/_variables-dark.scss @@ -0,0 +1,42 @@ +$is-dark: true; + +$hyperlink-text: #8db8ff; +$hyperlink-hover-text: #bbd4ff; +$dark-hyperlink-color:#8dB8ff; + +$bg-primary: #20256c; +$bg-secondary: #11184b; // searchbox input +$bg-tertiary: #06163e; // main bg + +$text-primary: #ffffff; +$text-secondary: #b5c2e3; +$text-headings: $text-primary; +$text-headline: #F5F6F7; +$text-disabled: #bababa; + +$border-color: #1285de; + +$menu-hover-bg: #282f89; + +$header-filter: none; +$header-shadow: 0 1px rgba($border-color, 0.5); + +$button-primary: #f46147; +$button-switch-shadow: null; + +$info-text: #03a9f4; + +$angular: #FF6358; +$telerik: #27A306; +$react: #53D2FA; +$blazor: #B695F3; +$jquery: #FF884D; +$test-studio: #EE8400; + +$product-color: $jquery; + +$icon-switcher-url: url(image_path("switcher-dark.png")); +$icon-treeview-e-url: url(image_path("expand-arrow-e.svg")); +$icon-treeview-s-url: url(image_path("expand-arrow-s.svg")); +$icon-scrollbar-arrow-n-url: url(image_path("arrow-scrollbar-n.svg")); +$icon-scrollbar-arrow-s-url: url(image_path("arrow-scrollbar-s.svg")); diff --git a/_assets/css/thememode/_variables-light.scss b/_assets/css/thememode/_variables-light.scss new file mode 100644 index 0000000..e4965d5 --- /dev/null +++ b/_assets/css/thememode/_variables-light.scss @@ -0,0 +1,33 @@ +$is-dark: false; + +$hyperlink-text: null; +$hyperlink-hover-text: null; +$dark-hyperlink-color:#3D57D8; + +$bg-primary: null; +$bg-secondary: #ffffff; +$bg-tertiary: null; + +$text-primary: null; +$text-secondary: #656565; +$text-headings: null; +$text-headline: null; +$text-disabled: null; + +$border-color: null; + +$menu-hover-bg: null; + +$header-filter: blur(45px); +$header-shadow: null; + +$button-primary: null; +$button-switch-shadow: 0px 0px 24px rgba(90, 94, 102, 0.4); + +$info-text: null; + +$icon-switcher: url(image_path("switcher-light.png")); +$icon-treeview-e-url: null; +$icon-treeview-s-url: null; +$icon-scrollbar-arrow-n-url: null; +$icon-scrollbar-arrow-s-url: null; diff --git a/_assets/css/thememode/_variables-template.scss b/_assets/css/thememode/_variables-template.scss new file mode 100644 index 0000000..ec8ce3a --- /dev/null +++ b/_assets/css/thememode/_variables-template.scss @@ -0,0 +1,32 @@ +$is-dark: null !default; + +$hyperlink-text: null !default; +$hyperlink-hover-text: null !default; + +$bg-primary: null !default; +$bg-secondary: null !default; +$bg-tertiary: null !default; + +$text-primary: null !default; +$text-secondary: null !default; +$text-headings: null !default; +$text-headline: null !default; +$text-disabled: null !default; + +$border-color: null !default; + +$menu-hover-bg: null !default; + +$header-filter: null !default; +$header-shadow: null !default; + +$button-primary: null !default; +$button-switch-shadow: null !default; + +$info-text: null !default; + +$suites: null !default; + +$icon-switcher-url: null !default; +$icon-scrollbar-arrow-n-url: null !default; +$icon-scrollbar-arrow-s-url: null !default; diff --git a/_assets/images/arrow-scrollbar-n.svg b/_assets/images/arrow-scrollbar-n.svg new file mode 100644 index 0000000..f37d82f --- /dev/null +++ b/_assets/images/arrow-scrollbar-n.svg @@ -0,0 +1,3 @@ + + + diff --git a/_assets/images/arrow-scrollbar-s.svg b/_assets/images/arrow-scrollbar-s.svg new file mode 100644 index 0000000..744ecef --- /dev/null +++ b/_assets/images/arrow-scrollbar-s.svg @@ -0,0 +1,3 @@ + + + diff --git a/_assets/images/expand-arrow-e.svg b/_assets/images/expand-arrow-e.svg new file mode 100644 index 0000000..8d9e30c --- /dev/null +++ b/_assets/images/expand-arrow-e.svg @@ -0,0 +1,3 @@ + + + diff --git a/_assets/images/expand-arrow-s.svg b/_assets/images/expand-arrow-s.svg new file mode 100644 index 0000000..bb3e115 --- /dev/null +++ b/_assets/images/expand-arrow-s.svg @@ -0,0 +1,3 @@ + + + diff --git a/_assets/images/icon-copy-code.svg b/_assets/images/icon-copy-code.svg new file mode 100644 index 0000000..ac21c26 --- /dev/null +++ b/_assets/images/icon-copy-code.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/_assets/images/switcher-dark.png b/_assets/images/switcher-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..d0aaa50b01ba88c97bde952ccf4bbd3b62eb92f2 GIT binary patch literal 425 zcmV;a0apHrP)5r00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP>ST4xj@#h8$v75Ss=t4PaA&%>lzLEu@5$kP>oaGEBtN;uwEdGwa!v zp0sbDWWZtZhlEKbYZqqb3c}!4xLgpgbz5L&$mAOjd1Q`tfwIG>5Z}zP6(Gr1X5VEn z!%+l2=D5Cqq30jFw>}#)^bz|{a>SA^+2D+nTfYGsq_0c!g25|$ros_iVBEs&(Y&`E z0}+|L!ITNYzRSDZNVUs+X(IZ9$pUpp;z~+VUsJQlBZr-w5ixkEVJeV6QQ}Y+Dw(s> z+%XMOGJ3}N6W+3wiQBH>Af1r&yC38VnVxKCFj_$S{#40U=~L+&eIHk;i@uP9bEh%I z*cqv2>0HfUG2XQ~~4O5wtEG-&<-hxIYPYC?CD TZOyJ;00000NkvXXu0mjf=Krw! literal 0 HcmV?d00001 diff --git a/_assets/images/switcher-light.png b/_assets/images/switcher-light.png new file mode 100644 index 0000000000000000000000000000000000000000..a0dae10b85b72a77318ac819be6f51269492da90 GIT binary patch literal 402 zcmV;D0d4+?P)PzxB=Xt93dxwY+-{FG!h+HJEdce&~B~N`qfU8D774? zpJd5?Ki~K4_e^l$Au1#>P4rgk6&M=>Z}ac##E!k_9%NJmd!|nvExUFm{+MTB;u0e( zdDbXe$y4+|G@DA`Gm!UkpIhbxvGP5@Lq42psB1US4B}z&u`` zQ|%Gp%nFlCZ3!~g&Q07*qoM6N<$f(E~#QUCw| literal 0 HcmV?d00001 diff --git a/_assets/js/dojo.js b/_assets/js/dojo.js index ef91a2a..a0d9bb8 100644 --- a/_assets/js/dojo.js +++ b/_assets/js/dojo.js @@ -62,7 +62,7 @@ var dojoApi = (function($) { $('
'+ ''+ ''+ - 'Open In Dojo'+ + 'Open In Dojo'+ '
').insertBefore(element); } }, diff --git a/_assets/js/main.js b/_assets/js/main.js index d852c47..3818ab5 100644 --- a/_assets/js/main.js +++ b/_assets/js/main.js @@ -8,6 +8,7 @@ //= require tracking //= require top-menu +//= require theme-mode //= require related-articles //= require toc //= require code-snippet diff --git a/_assets/js/side-nav.js b/_assets/js/side-nav.js index 22e5a33..99b3aaf 100644 --- a/_assets/js/side-nav.js +++ b/_assets/js/side-nav.js @@ -87,7 +87,7 @@ function setSideNavPosition() { var $window = $(window); var windowHeight = $window.height(); var scrollFold = $window.scrollTop() + windowHeight; - var topNavigationHeight = ($('.SiteRibbon').outerHeight() || 0) + ($('nav.TK-Nav').height() || ($('.PRGS-Nav').height() + $('.PRGS-Bar').height())) + var topNavigationHeight = ($('.SiteRibbon').outerHeight() || 0) + ($('nav.TK-Nav').height() || ($('.PRGS-Nav').height() + $('.PRGS-Bar').height())); var progressBarHeight = $('aside.TK-Hat').height() || $('.PRGS-Bar').height(); var top = window.scrollY > 0 ? topNavigationHeight - progressBarHeight : topNavigationHeight; diff --git a/_assets/js/theme-mode.js b/_assets/js/theme-mode.js new file mode 100644 index 0000000..1dc380b --- /dev/null +++ b/_assets/js/theme-mode.js @@ -0,0 +1,29 @@ +var appTheme = function () { + var LOCAL_STORAGE_STATE = "isDark"; + var IS_BLACK = localStorage.getItem(LOCAL_STORAGE_STATE) === 'true'; + var DOM_ELEMENT = $(".kd-mode"); + + function setTheme() { + DOM_ELEMENT.attr('data-is-dark', IS_BLACK); + localStorage.setItem(LOCAL_STORAGE_STATE, IS_BLACK); + } + + function switchTheme() { + IS_BLACK = !IS_BLACK; + setTheme() + } + + function init() { + setTheme(); + $(".switch-btn").click(switchTheme); + } + + return { + init: init + } + +}(); + +$(document).ready(function () { + appTheme.init(); +}); diff --git a/_includes/_head.html b/_includes/_head.html index b945c4a..832ac94 100644 --- a/_includes/_head.html +++ b/_includes/_head.html @@ -38,6 +38,9 @@ "isPartOf": "{% if site.product_url %}{{ site.product_url }}{% else %}https://docs.telerik.com{{site.baseurl}}{% endif %}" } + {% endif %} diff --git a/_assets/images/edit.svg b/_includes/icons/edit.svg similarity index 100% rename from _assets/images/edit.svg rename to _includes/icons/edit.svg diff --git a/_includes/icons/menu.svg b/_includes/icons/menu.svg new file mode 100644 index 0000000..fa15bc4 --- /dev/null +++ b/_includes/icons/menu.svg @@ -0,0 +1,4 @@ + + menu + + diff --git a/_includes/search.html b/_includes/search.html index 75a7c07..c9aaed0 100644 --- a/_includes/search.html +++ b/_includes/search.html @@ -1,6 +1,7 @@
- + {% include icons/search.svg %} +
diff --git a/_includes/top-nav.html b/_includes/top-nav.html index e69de29..ebaa826 100644 --- a/_includes/top-nav.html +++ b/_includes/top-nav.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_layouts/api-index.html b/_layouts/api-index.html index 30383f9..77c1c6a 100644 --- a/_layouts/api-index.html +++ b/_layouts/api-index.html @@ -2,6 +2,19 @@ layout: default --- +