helpcenter/Web/css/builder/builder.less

812 lines
19 KiB
Plaintext

@import "../base.less";
@color2: #f4f4f4;
@color3: #4d4e53;
@color4: #eee;
@color6: #ddd;
h1 {
color: @textColorLinkMain;
font-size: 35px;
font-weight: 300;
margin: 0;
margin: 1em 0 .5em;
}
h2, .description h2 {
color: @textColorLinkMain;
font-size: 30px;
font-weight: 300;
margin: 0;
margin: 1.5em 0 .3em;
}
h3 {
color: @textColorLinkMain;
font-size: 24px;
font-weight: 400;
margin: 0;
margin: 1.2em 0 .3em;
}
h4, .description h4 {
color: @textColorLinkMain;
font-size: 18px;
font-weight: 400;
margin: 0;
margin: 1em 0 .2em;
width: auto;
}
h5 {
color: @textColorLinkMain;
font-size: 120%;
font-weight: 300;
margin: 0;
margin: 8px 0 3px 0;
}
h6 {
color: @textColorLinkMain;
font-size: 100%;
font-weight: 400;
margin: 0;
margin: 6px 0 3px 0;
}
h1.page-title {
font-size: 35px;
margin: 1em 30px;
}
h4.name {
background: @textColorLinkMain;
color: @defaultBgColor;
margin: 2.5em 0 0.5em;
padding: .3em 0 .3em 10px;
}
.container-overview {
.subsection-title {
font-size: 120%;
letter-spacing: -0.01em;
margin: 8px 0 3px 0;
}
}
tt {
background: @color2;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
padding: 1px 5px;
}
code {
background: @color2;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
padding: 1px 5px;
}
kbd {
background: @color2;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
padding: 1px 5px;
}
samp {
background: @color2;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
padding: 1px 5px;
}
.class-description {
font-size: 130%;
line-height: 140%;
margin-bottom: 1em;
margin-top: 1em;
&:empty {
margin: 0;
}
}
#main {
float: right;
min-width: 360px;
width: calc(100% - 240px);
}
header {
display: block;
}
section {
background-color: @defaultBgColor;
display: block;
padding: 0;
}
.variation {
display: none;
}
.signature-attributes {
color: @color4;
font-size: 60%;
font-style: italic;
font-weight: lighter;
}
.ancestors {
color: #999999;
a {
color: #999999 !important;
}
}
.clear {
clear: both;
}
.important {
color: #950B02;
font-weight: bold;
}
.yes-def {
text-indent: -1000px;
}
.type-signature {
color: #CA79CA;
a {
color: @defaultBgColor;
}
&:last-child {
color: @color4;
}
}
.name {
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
code {
color: @color3;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
font-size: 100%;
}
}
.signature {
color: #9ecb3b;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
}
.details {
border-left: 2px solid @color6;
font-size: 14px;
line-height: 20px;
margin-top: 6px;
dt {
float: left;
padding-left: 10px;
width: 120px;
}
dd {
margin-bottom: 6px;
margin-left: 70px;
margin-top: 6px;
}
ul {
list-style-type: none;
margin: 0;
}
pre.prettyprint {
margin: 0;
}
.object-value {
padding-top: 0;
}
}
.builder_description {
margin-bottom: 1em;
margin-top: 1em;
line-height: 1.4em;
}
.code-caption {
color: @textColorLinkMain;
font-size: 15px;
font-weight: 600;
margin: 0;
}
.prettyprint {
font-size: 14px;
overflow: auto;
code {
white-space: pre-wrap;
display: block;
line-height: 18px;
span.line {
display: inline-block;
}
}
.linenums {
code {
padding: 0 15px;
}
li {
&:first-of-type {
code {
padding-top: 15px;
}
}
&:last-of-type {
code {
padding-bottom: 15px;
}
}
}
}
}
.prettyprint.source {
display: block;
line-height: 18px;
width: inherit;
border-radius: 0;
}
.prettyprint>code {
padding: 15px;
}
.prettyprint.linenums {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
padding: 0 10px;
user-select: none;
ol {
padding-left: 0;
}
li {
border-left: 2px @textColorLinkMain solid;
* {
-moz-user-select: text;
-ms-user-select: text;
-webkit-user-select: text;
user-select: text;
}
}
li.selected {
background-color: @helpBorderColor;
* {
background-color: @helpBorderColor;
}
}
}
.params {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid @color6;
font-size: 14px;
margin: 1em 0;
width: 100%;
td {
border-top: 1px solid @color4;
color: @color3;
display: table-cell;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
font-size: 100%;
margin: 0px;
padding: 10px;
text-align: left;
vertical-align: top;
.param-type {
color: @textColorLinkMain;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
text-decoration: none;
}
}
.name {
color: @color3;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
font-size: 100%;
}
th {
display: table-cell;
margin: 0px;
padding: 10px;
text-align: left;
vertical-align: top;
}
thead {
tr {
background-color: @defaultBgColor;
font-weight: bold;
}
}
.params {
thead {
tr {
background-color: @defaultBgColor;
font-weight: bold;
}
}
}
td.builder_description>p {
&:first-child {
margin-top: 0;
padding-top: 0;
}
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
td.builder_description.last {
font-family: 'Open Sans', sans-serif, Arial;
}
}
.props {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid @color6;
font-size: 14px;
margin: 1em 0;
width: 100%;
.name {
color: @color3;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
font-size: 100%;
}
td {
display: table-cell;
margin: 0px;
padding: 10px;
text-align: left;
vertical-align: top;
}
th {
display: table-cell;
margin: 0px;
padding: 10px;
text-align: left;
vertical-align: top;
}
thead {
tr {
background-color: @defaultBgColor;
font-weight: bold;
}
}
.props {
thead {
tr {
background-color: @defaultBgColor;
font-weight: bold;
}
}
}
td.builder_description>p {
&:first-child {
margin-top: 0;
padding-top: 0;
}
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
}
span.param-type {
color: @textColorLinkMain;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
text-decoration: none;
}
.param-type {
margin: 14px 0;
dd {
color: @textColorLinkMain;
display: inline-block;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', monospace;
}
dt {
display: inline-block;
}
}
.disabled {
color: #454545;
}
.overlay {
background: hsla(0, 0%, 0%, 0.5);
bottom: 0;
display: none;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 1;
}
.readme {
h1.page-title {
margin: 1em 0;
}
}
.docnote {
background-color: #efefef;
font-size: 13px;
line-height: 1.5em;
margin: 20px 0;
padding: 10px 20px;
}
.document_structure {
border: 1px solid @helpBorderColor;
margin: 15px 0 0;
padding: 10px 20px 20px;
text-align: left;
vertical-align: top;
}
.document_structure.tablecell_node {
display: inline-block;
width: 44%;
.document_structure.image_node {
width: 23%;
padding-left: 10px;
padding-right: 10px;
}
.document_structure.shape_node {
width: 23%;
padding-left: 10px;
padding-right: 10px;
}
.document_structure.chart_node {
width: 23%;
padding-left: 10px;
padding-right: 10px;
}
}
.document_structure.image_node {
display: inline-block;
width: 27%;
}
.spreadsheet_document {
.document_structure.image_node, .document_structure.chart_node {
display: inline-block;
width: 44.9%;
}
.document_structure.shape_node {
display: block;
width: auto;
}
}
.presentation_document {
.document_structure.image_node, .document_structure.chart_node {
display: inline-block;
width: 44.6%;
}
.document_structure.shape_node {
display: block;
width: auto;
}
}
.document_structure.shape_node {
display: inline-block;
width: 27%;
}
.document_structure.chart_node {
display: inline-block;
width: 27%;
}
.node_description {
margin: 0;
padding: 5px 0 0;
}
.node_api {
color: #50618c;
}
.description_element_label {
background-color: @color2;
color: @textColorLinkMain;
padding: 1px 5px;
}
.cell_specific {
background-color: @color4;
color: #8da451;
display: inline-block;
font-size: 18px;
font-weight: 600;
margin: 15px 0 0;
padding: 3px 10px;
}
.menuleft {
ul[class^="text_document_expand_menu"], ul[class^="spreadsheet_expand_menu"], ul[class^="presentation_expand_menu"], ul[class^="plugin_structure_expand_menu"], ul[class^="doctrenderer_expand_menu"], ul[class^="integration_examples_expand_menu"] {
display: none;
position: relative;
}
}
.InnerPage {
.description {
ul.buider_page_methods_list, .buider_page_methods_list {
-webkit-columns: 3 200px;
-moz-columns: 3 200px;
columns: 3 200px;
column-gap: 0;
padding-bottom: 30px;
li {
list-style-type: none !important;
}
}
}
}
section iframe {
width: 100%;
height: 500px;
margin-top: 10px;
}
.InnerPage {
p.node_label {
color: @textColorLinkMain;
font-size: 18px;
margin: 0;
padding: 0;
}
.main {
.description {
.MainHelpCenter {
&.PageGuides {
.param-type {
a {
text-decoration: underline;
}
}
.keyword_block {
li {
a {
color: #777;
font-size: 13px;
text-decoration: none;
&:hover {
border-color: @textColorLinkMain;
color: @textColorLinkMain;
text-decoration: none;
}
}
}
}
}
}
}
}
.description {
.menuleft {
margin-left: -314px;
width: 249px;
li {
position: relative;
&.init_read_methods, &.init_write_methods {
&:before {
font-size: 0.9em;
color: #666;
display: inline-block;
position: absolute;
.rotate(270deg);
text-align: center;
}
}
&.init_read_methods {
&:before {
content: 'read-only';
left: -116px;
top: 99px;
width: 199px;
border-bottom: 2px solid #ca543d;
}
}
&.init_write_methods {
&:before {
content: 'write';
left: -53px;
top: 36px;
width: 73px;
border-bottom: 2px solid #3db80f;
}
}
span.expanded_node_builder {
display: block;
width: 20px;
height: 20px;
position: absolute;
cursor: pointer;
margin: 0;
padding: 0;
left: -14px;
top: 1px;
&:before {
position: absolute;
left: 0;
top: 12px;
display: block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #696969;
height: 0;
width: 0;
content: '';
-webkit-transition: 0.1s linear;
-moz-transition: 0.1s linear;
-o-transition: 0.1s linear;
transition: 0.1s linear;
}
&.collapsed_node_builder:before {
-moz-transform: rotate( -90deg );
-ms-transform: rotate( -90deg );
-o-transform: rotate( -90deg );
-webkit-transform: rotate( -90deg );
transform: rotate( -90deg );
-webkit-transition: 0.1s linear;
-moz-transition: 0.1s linear;
-o-transition: 0.1s linear;
transition: 0.1s linear;
}
}
}
}
.kb_index_page {
display: inline-block;
vertical-align: top;
min-width: 100%;
h5 {
margin-bottom: 10px;
}
ul {
margin-left: 0;
li {
position: relative;
&:before {
content: '- ';
color: @textColorLinkMain;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
.BuilderClassList {
ul.buider_page_methods_list {
margin-bottom: 30px;
margin-left: 0;
padding-bottom: 30px;
border-bottom: 1px solid @helpBorderColor;
}
}
}
}
.api_highlighted {
background-color: #ffef99;
display: inline-block;
padding: 0 3px;
margin: 0 -3px;
}
.copy_code_btn {
float: right;
margin: -25px 0 0;
background-color: @defaultWhiteColor;
border: 1px solid @helpBorderColor;
color: @textColor;
padding: 5px 20px;
font-size: 13px;
display: inline-block;
cursor: pointer;
&:hover {
background-color: @color4;
}
}
.developer_plugins .description .MainHelpCenter,
.builder_description {
ul {
li {
list-style-type: disc;
}
}
}
a.closeContainerButton {
background: url(/images/closelabel.png) no-repeat 50% 50%;
width: 15px;
height: 15px;
position: absolute;
right: -4px;
top: 8px;
background-color: #fff;
border-radius: 25px;
color: transparent;
&:hover {
background-color: rgba(255,255,255,0.7);
}
}
.textHelpContainer {
padding: 1px;
}
.InnerPage {
.description {
.exampleSwitcher {
.exampleSwitcherList {
display: block;
width: auto;
margin: 20px 0;
padding: 0 20px;
border-bottom: 1px solid @helpBorderBottomColor;
li {
display: inline-block;
padding: 5px 15px;
margin: 0 0 -1px;
border: 1px solid @helpBorderBottomColor;
&.active {
border-bottom: 1px solid #fff;
}
}
&.clickable {
li {
cursor: pointer;
}
}
}
.exeExample {
display: none
}
}
}
}
.InnerPage {
.description {
.PageGuides {
.docbuilder_examples_list {
margin: 10px 0 20px;
.docbuilder_examples_blocks {
margin: 0;
li {
display: inline-block;
list-style-type: none;
margin: 0 20px 0 0;
padding: 0;
text-align: center;
a.db_examples {
display: block;
margin: 5px 0 0;
}
}
}
}
}
}
}
ol.doc_builder_integration_list {
li {
margin: 0 0 30px;
}
}
.rw_label {
display: inline-block;
color: #fff;
font-size: 12px;
padding: 1px 10px;
line-height: 18px;
margin: 0;
&.read_only_label {
background-color: #ca543d;
}
&.write_label {
background-color: #3db80f;
}
&.optional_label {
background-color: #e0e01c;
}
&.required_label {
background-color: #fd8488;
}
}
a.btnGitHub, a.btnGitHub:hover, a.btnGitHub:active, a.btnGitHub:focus, a.btnGitHub:visited {
position: relative;
padding-left: 55px;
font-size: 16px;
text-transform: none;
font-weight: 600;
&:before {
display: block;
width: 28px;
height: 28px;
content: '';
background: url(/images/icons/icon_github.png) no-repeat 0 0;
position: absolute;
left: 25px;
top: 11px;
}
}