зеркало из https://github.com/telerik/docs-seed.git
feat: add dark theme
This commit is contained in:
Magdalena Angelova
Родитель
1c971405b6
Коммит
d766f776a6
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@mixin opacity($property, $color, $opacity) {
|
||||
#{$property}: rgba($color, $opacity);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -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"));
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.49999 0L8.99999 5H-7.43315e-06L4.49999 0Z" fill="#8DB8FF"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 171 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.50001 5L7.19228e-06 7.86804e-07L9.00001 0L4.50001 5Z" fill="#8DB8FF"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 182 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.501961" d="M0.9375 1.0625L4.875 5L0.9375 8.9375L2 10L7 5L2 0L0.9375 1.0625Z" fill="#F5F6F7"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 212 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.9375 0.9375L5 4.875L1.0625 0.9375L0 2L5 7L10 2L8.9375 0.9375Z" fill="#FF6358"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 193 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group">
|
||||
<path id="Vector" d="M1 1H4V2H6L4 0H0V11H3V10H1V1Z" fill="#F5F6F7"/>
|
||||
<path id="Vector_2" d="M8 3H4V14H12V7L8 3ZM5 13V4H8V7H11V13H5Z" fill="#F5F6F7"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 273 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 425 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 402 B |
|
|
@ -62,7 +62,7 @@ var dojoApi = (function($) {
|
|||
$('<div class="action-buttons">'+
|
||||
'<button class="btn btn-edit" title="Edit example">Edit</button>'+
|
||||
'<button class="btn btn-run" title="Run example">Preview</button>'+
|
||||
'<a href="https://dojo.telerik.com" class="btn btn-dojo" title="Open example in Kendo UI Dojo">Open In Dojo</a>'+
|
||||
'<a href="https://dojo.telerik.com" class="btn btn-dojo" title="Open example in Kendo UI Dojo"><svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Group"><path id="Vector" d="M1 1H4V2H6L4 0H0V11H3V10H1V1Z" fill="#F5F6F7"/><path id="Vector_2" d="M8 3H4V14H12V7L8 3ZM5 13V4H8V7H11V13H5Z" fill="#F5F6F7"/></g></svg><span>Open In Dojo</span></a>'+
|
||||
'</div>').insertBefore(element);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
//= require tracking
|
||||
//= require top-menu
|
||||
//= require theme-mode
|
||||
//= require related-articles
|
||||
//= require toc
|
||||
//= require code-snippet
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
|
@ -38,6 +38,9 @@
|
|||
"isPartOf": "{% if site.product_url %}{{ site.product_url }}{% else %}https://docs.telerik.com{{site.baseurl}}{% endif %}"
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
if (localStorage.isDark) document.documentElement.setAttribute("data-is-dark", localStorage.isDark);
|
||||
</script>
|
||||
{% endif %}
|
||||
<link rel="shortcut icon" href="{{site.baseurl}}/favicon.ico"/>
|
||||
<link rel="preconnect" href="https://stats.g.doubleclick.net" />
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 729 B После Ширина: | Высота: | Размер: 729 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
<title>menu</title>
|
||||
<path class="cls-1" d="M0,17H4V13H0Zm6-7H22l2-2H6ZM0,11H4V7H0ZM24,2H6V4H22ZM0,23H4V19H0Zm6-7H22l2-2H6ZM0,5H4V1H0ZM6,22H22l2-2H6Z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 280 B |
|
|
@ -1,6 +1,7 @@
|
|||
<form action="{{site.baseurl}}/search" method="get">
|
||||
<div class="search-input-container">
|
||||
<input id="local-search" placeholder="Search for …" name="q" />
|
||||
{% include icons/search.svg %}
|
||||
<input id="local-search" placeholder="Search …" name="q" />
|
||||
<div id='refine-search-container'>
|
||||
<div id='refine-search-button' class='unselectable'>
|
||||
<span id='refine-search-label' data-bind='text: label'></span>
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -2,6 +2,19 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
<div id="navbar" class="nav">
|
||||
<a class="mobile-menu all-components" >
|
||||
{% include icons/menu.svg %}
|
||||
</a>
|
||||
{% if site.has_search != false %}
|
||||
<div class="global-search">
|
||||
{% include search.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="switch-btn">
|
||||
<span class="switch-icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<script>
|
||||
|
|
@ -17,19 +30,6 @@ layout: default
|
|||
<div class="content-wrapper col-sm-8 col-sm-offset-4 col-md-offset-3 col-lg-8 col-lg-offset-2">
|
||||
<div class="row" style="overflow: hidden;">
|
||||
<div class="col-md-10 col-md-offset-1 mb-40">
|
||||
<div id="navbar" class="nav navbar-collapse row">
|
||||
<div class="col-xs-2">
|
||||
<span class="k-icon all-components-expanded-icon"></span>
|
||||
<a class="button all-components" ><span class="item-expanded"></span></a>
|
||||
</div>
|
||||
{% if site.has_search != false %}
|
||||
{% if page.is_search_page != true %}
|
||||
<div class="global-search">
|
||||
{% include search.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if site.has_web_api_index != true %}
|
||||
<div class="breadcrumbs api-breadcrumbs-container"></div>
|
||||
{% endif %}
|
||||
|
|
@ -85,7 +85,7 @@ layout: default
|
|||
</div><!-- /row right content -->
|
||||
</div>
|
||||
|
||||
<div class="additional-content-column col-md-2 visible-lg">
|
||||
<div class="additional-content-column side-nav-secondary col-md-2 visible-lg">
|
||||
{% if page.toc != false %}
|
||||
{% include article-toc.html %}
|
||||
{% endif %}
|
||||
|
|
@ -104,7 +104,10 @@ layout: default
|
|||
</div>
|
||||
{% endunless %}
|
||||
{% if site.edit_repo_url and page.is_search_page != true and page.editable != false %}
|
||||
<a class="btn-edit-article" href="{{ site.edit_repo_url }}/{{ page.parent_path | replace: '.html','' }}.md" target="_blank">Improve this article</a>
|
||||
<a class="btn-edit-article" href="{{ site.edit_repo_url }}/{{ page.parent_path | replace: '.html','' }}.md" target="_blank">
|
||||
{% include icons/edit.svg %}
|
||||
<span>Improve this article</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% assign randomNumber = "now" | date: "%N" %}
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<html class="no-js kd-mode">
|
||||
{% include _head.html %}
|
||||
|
||||
<body role="document" class="layout-{{ page.layout }} brand">
|
||||
|
|
|
|||
|
|
@ -2,28 +2,28 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
<div id="navbar" class="nav">
|
||||
<a class="mobile-menu all-components" >
|
||||
{% include icons/menu.svg %}
|
||||
</a>
|
||||
{% if site.has_search != false %}
|
||||
<div class="global-search">
|
||||
{% include search.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="switch-btn">
|
||||
<span class="switch-icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="side-nav col-sm-4 col-md-3 col-lg-2">
|
||||
<div class="side-nav col-sm-4 col-md-3site.has_search
|
||||
col-lg-2">
|
||||
{% include side-nav.html %}
|
||||
</div>
|
||||
<div class="content-wrapper col-sm-8 col-sm-offset-4 col-md-offset-3 col-lg-8 col-lg-offset-2">
|
||||
<div class="row" style="overflow: hidden;">
|
||||
<div class="col-md-10 col-md-offset-1 mb-40">
|
||||
|
||||
<div id="navbar" class="nav navbar-collapse row">
|
||||
<div class="col-xs-2">
|
||||
<span class="k-icon all-components-expanded-icon"></span>
|
||||
<a class="button all-components" ><span class="item-expanded"></span></a>
|
||||
</div>
|
||||
{% if site.has_search != false %}
|
||||
{% if page.is_search_page != true %}
|
||||
<div class="global-search">
|
||||
{% include search.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if site.platforms.size > 0 %} {% platforms Available for: %} {% endif %}
|
||||
|
||||
|
|
@ -101,7 +101,7 @@ layout: default
|
|||
</div><!-- /row right content -->
|
||||
</div>
|
||||
|
||||
<div class="additional-content-column col-md-2 visible-lg">
|
||||
<div class="additional-content-column side-nav-secondary col-md-2 visible-lg">
|
||||
{% if page.toc != false %}
|
||||
{% include article-toc.html %}
|
||||
{% endif %}
|
||||
|
|
@ -120,9 +120,13 @@ layout: default
|
|||
</div>
|
||||
{% endunless %}
|
||||
{% if site.edit_repo_url and page.is_search_page != true and page.editable != false %}
|
||||
<a class="btn-edit-article" href="{{ site.edit_repo_url }}/{{ page.path | replace: '.md','' }}.md" target="_blank">Improve this article</a>
|
||||
<a class="btn-edit-article" href="{{ site.edit_repo_url }}/{{ page.path | replace: '.md','' }}.md" target="_blank">
|
||||
{% include icons/edit.svg %}
|
||||
<span>Improve this article</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@ module Jekyll
|
|||
new_content += page_schema.main_page_header
|
||||
|
||||
new_content+= '<div id="api-filter">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><path fill="#FFFFFF" d="M6.499,1.985C3.461,1.985,1,4.449,1,7.484c0,3.039,2.461,5.5,5.499,5.5c3.037,0,5.498-2.461,5.498-5.5 C11.996,4.449,9.535,1.985,6.499,1.985z M6.499,11.885c-2.429,0-4.399-1.97-4.399-4.401c0-2.429,1.97-4.399,4.399-4.399 c2.429,0,4.399,1.97,4.399,4.399C10.897,9.915,8.928,11.885,6.499,11.885z M13.828,13.746c0,1.179,0.109,1.067-1.069,1.067 l-1.678-1.678c0-1.177-0.109-1.067,1.069-1.067L13.828,13.746z"/></svg>
|
||||
<input type="search" class="search" placeholder="Filter..." />
|
||||
</div>'
|
||||
end
|
||||
|
|
|
|||
|
|
@ -20,30 +20,6 @@ res_type: kb
|
|||
<article>
|
||||
<h1>{{ page.heading }}</h1>
|
||||
<div class="local-search mt-20">
|
||||
<div class="search-input-container">
|
||||
<input id="local-search" placeholder="Search for …" name="q" class="kb-search"/>
|
||||
<div id='refine-search-container'>
|
||||
<div id='refine-search-button' class='unselectable'>
|
||||
<span id='refine-search-label' data-bind='text: label'></span>
|
||||
<span class='k-icon k-i-arrow-chevron-down'></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="refine-search-popup" style="display: none">
|
||||
<ul>
|
||||
<li>
|
||||
<label class="custom-checkbox unselectable"><input type="checkbox" {% if page.res_type != 'kb' and page.res_type != 'api' %} disabled="true" {% endif %} data-bind="checked: documentation" /><span class="k-icon k-i-check"></span>Search in Documentation</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="custom-checkbox unselectable"><input type="checkbox" {% if page.res_type == 'kb' %} disabled="true" {% endif %} data-bind="checked: kb" /><span class="k-icon k-i-check"></span>Search in Knowledge Base</label>
|
||||
</li>
|
||||
{% if site.has_api_reference != false %}
|
||||
<li>
|
||||
<label class="custom-checkbox unselectable"><input type="checkbox" {% if page.res_type == 'api' %} disabled="true" {% endif %} data-bind="checked: api" /><span class="k-icon k-i-check"></span>Search in API Reference</label>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
gcsInstance = '{{site.gcs_engine}}';
|
||||
|
|
|
|||
|
|
@ -13,9 +13,6 @@ sitemap: false
|
|||
<div class="col-sm-12">
|
||||
<article>
|
||||
<h1>{{ page.heading }}</h1>
|
||||
<div class="local-search mt-20">
|
||||
{% include search.html %}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче