8a8709d2c7
* [ios, macos] Fact-checked expression guide Corrected various factual inaccuracies in the “Predicates and Expressions” guide. Moved some explanation from the predicates section to the expressions section. Added sections for all the other expression types we support. * [ios, macos] Reorganized custom function documentation Reorganized the custom function documentation as a series of sections with headers and definition lists instead of a monolithic table. Copyedited various sections for accuracy. Linked references to custom functions. Added format string examples for all custom functions. * [ios, macos] Made h3 more visible * [ios, macos] Added Objective-C example of placeholders * [ios, macos] Documented trig functions * [ios, macos] Also increase h3 code size * [ios, macos] Replaced Markdown with HTML in definition * [ios, macos] Replaced Markdown with HTML in custom function documentation * [ios, macos] Clarified stops * [ios, macos] Cross-referenced functions Each custom function definition cross-references the corresponding aftermarket function (or vice versa), the corresponding style specification expression operator, and any related NSExpression syntax. * [ios, macos] Fixed links in predicate guide * [ios, macos] Consolidated and documented NSExpression categories Consolidated the NSExpression categories into a single category, with marks to separate different tasks. Documented the MGLAdditions category so that it shows up in the jazzy documentation. * [ios, macos] Fixed NSExpression private category mixup
728 lines
13 KiB
SCSS
728 lines
13 KiB
SCSS
// ===========================================================================
|
|
//
|
|
// Variables
|
|
//
|
|
// ===========================================================================
|
|
|
|
$body_background: #fff;
|
|
$body_font: 14px/25px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
$text_color: #333;
|
|
$gray_border: 1px solid #ddd;
|
|
|
|
$quote_color: #858585;
|
|
$quote_border: 4px solid #e5e5e5;
|
|
|
|
$link_color: #3887BE;
|
|
$link_hover_color: #63b6e5;
|
|
|
|
$table_alt_row_color: #fbfbfb;
|
|
$table_border_color: #ddd;
|
|
|
|
$color_light: #F5F8FC;
|
|
$color_darkblue: #0B293A;
|
|
$color_brightblue: #3A68D8;
|
|
$color_darkblue_lighten: rgba(11, 41, 58, 0.75);
|
|
$keyline_color: rgba(12, 40, 73, 0.08);
|
|
$code_font: Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospacee;
|
|
|
|
$purple: #9595D1;
|
|
$blue: #4092C5;
|
|
|
|
// ----- Layout
|
|
|
|
$gutter: 16px;
|
|
$navigation_min_width: 175px;
|
|
$navigation_max_width: 300px;
|
|
|
|
|
|
// ----- Header
|
|
|
|
$header_weight: normal;
|
|
$header_color: #555;
|
|
$header_font: 'Open Sans Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
$header_link_color: #fff;
|
|
$doc_coverage_color: #999;
|
|
|
|
|
|
// ----- Navigation
|
|
|
|
$navigation_max_width: 300px;
|
|
$navigation_bg_color: #fbfbfb;
|
|
$navigation_task_color: $link_color;
|
|
|
|
$section_name_color: $color_darkblue;
|
|
$navigation_gloss_color: #999;
|
|
|
|
// ----- Content
|
|
|
|
$declaration_title_language_color: #4183c4;
|
|
$declaration_language_border: 4px solid $color_brightblue;
|
|
$declaration_bg_color: #fdfeff;
|
|
$declaration_border_color: #ddd;
|
|
|
|
$aside_color: #aaa;
|
|
$aside_border: 4px solid lighten($aside_color, 20%);
|
|
$aside_warning_color: #ff0000;
|
|
$aside_warning_border: 4px solid lighten($aside_warning_color, 20%);
|
|
|
|
// ----- Footer
|
|
|
|
$footer_text_color: #888;
|
|
$footer_link_color: #555;
|
|
|
|
|
|
// ===========================================================================
|
|
//
|
|
// Base
|
|
//
|
|
// ===========================================================================
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: $body_background;
|
|
color: $color_darkblue;
|
|
font: $body_font;
|
|
-webkit-font-smoothing: antialiased;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// ----- Block elements
|
|
|
|
@mixin heading($font-size: 1rem, $margin: 1.275em 0 0.85em) {
|
|
font-family: $header_font;
|
|
font-size: $font-size;
|
|
font-weight: $header_weight;
|
|
color: $color_darkblue;
|
|
margin: $margin;
|
|
}
|
|
|
|
h1 {
|
|
@include heading(1.7rem, 0.5em 0 0.6em);
|
|
}
|
|
|
|
h1 a {
|
|
color: $color_darkblue;
|
|
}
|
|
|
|
h2 {
|
|
@include heading(1.5rem, 1em 0 0.6em);
|
|
}
|
|
|
|
h3 {
|
|
@include heading(1.2rem, 1em 0 0.3em);
|
|
}
|
|
|
|
h3 > code {
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
h4 {
|
|
@include heading(1rem);
|
|
}
|
|
|
|
h5, h6 {
|
|
@include heading;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 1em;
|
|
}
|
|
|
|
ul, ol {
|
|
padding: 0 0 0 1.5em;
|
|
margin: 0 0 0.85em;
|
|
}
|
|
|
|
ul.item-container {
|
|
padding: 0px;
|
|
}
|
|
|
|
ul:first-of-type,
|
|
ol:first-of-type {
|
|
margin: 0px;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 0 0 0.85em;
|
|
padding: 0 15px;
|
|
color: $quote_color;
|
|
border-left: $quote_border;
|
|
}
|
|
|
|
|
|
// ----- Inline elements
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
a {
|
|
color: $link_color;
|
|
text-decoration: none;
|
|
> *:hover, &:hover, &:focus {
|
|
opacity: 0.7;
|
|
}
|
|
&:focus {
|
|
box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
|
|
}
|
|
}
|
|
|
|
// ----- Tables
|
|
|
|
table {
|
|
background: $body_background;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
line-height: 23px;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
overflow: auto;
|
|
margin: 0 0 0.85em;
|
|
}
|
|
|
|
th, td {
|
|
padding: 6px 13px;
|
|
border: 1px solid $keyline_color;
|
|
}
|
|
|
|
|
|
// ----- Code
|
|
|
|
pre {
|
|
margin: 0 0 1.275em;
|
|
padding: .85em 1em;
|
|
overflow: auto;
|
|
background: $color_light;
|
|
font-family: $code_font;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
code {
|
|
font-family: $code_font;
|
|
font-size: 13px;
|
|
line-height: .85em;
|
|
}
|
|
|
|
p, li {
|
|
> code {
|
|
background: $color_light;
|
|
padding: 0.1em 0.2em;
|
|
font-weight: bold;
|
|
border: 1px solid #D5D5D5;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
td > code,
|
|
.graybox code {
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
|
|
pre code {
|
|
padding: 0;
|
|
white-space: pre;
|
|
}
|
|
|
|
|
|
// ===========================================================================
|
|
//
|
|
// Layout
|
|
//
|
|
// ===========================================================================
|
|
|
|
.content-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@media (min-width: 768px) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
.limiter {
|
|
max-width: 1360px;
|
|
margin: auto;
|
|
padding: 0px 30px;
|
|
}
|
|
.space-right2 {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
// ===========================================================================
|
|
//
|
|
// Header
|
|
//
|
|
// ===========================================================================
|
|
|
|
.header-container {
|
|
background: $color_brightblue;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
padding: 12px 0px;
|
|
font-size: 12px;
|
|
color: $doc_coverage_color;
|
|
@media (max-width: 768px) {
|
|
display: block;
|
|
}
|
|
}
|
|
.header-tag {
|
|
vertical-align: text-top;
|
|
line-height: 10px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 4px;
|
|
padding: 2px 5px;
|
|
margin-left: 5px;
|
|
opacity: 0.9;
|
|
|
|
}
|
|
.header-col {
|
|
margin: 5px 0 0 0;
|
|
padding: 0
|
|
}
|
|
|
|
.header-col--primary {
|
|
flex: 1;
|
|
}
|
|
|
|
.header-link {
|
|
font-family: $header_font;
|
|
color: $header_link_color;
|
|
}
|
|
|
|
.header-image, .header-icon {
|
|
padding-right: 2px;
|
|
vertical-align: -4px;
|
|
height: 16px;
|
|
}
|
|
|
|
// ===========================================================================
|
|
//
|
|
// Breadcrumbs
|
|
//
|
|
// ===========================================================================
|
|
|
|
.breadcrumbs {
|
|
font-size: 13px;
|
|
padding: $gutter / 2 0px;
|
|
margin: 0;
|
|
background: $color_light;
|
|
border-bottom: 1px solid $keyline_color;
|
|
}
|
|
|
|
.carat {
|
|
height: 10px;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
|
|
// ===========================================================================
|
|
//
|
|
// Navigation
|
|
//
|
|
// ===========================================================================
|
|
|
|
.navigation {
|
|
order: 2;
|
|
font-size: 13px;
|
|
padding-top: 20px;
|
|
@media (min-width: 768px) {
|
|
order: 1;
|
|
width: 25%;
|
|
min-width: $navigation_min_width;
|
|
max-width: $navigation_max_width;
|
|
padding-bottom: $gutter*4;
|
|
line-height: 20px;
|
|
overflow: hidden;
|
|
border-right: 1px solid $keyline_color;
|
|
}
|
|
}
|
|
|
|
.nav-groups {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.nav-group-name {
|
|
padding: $gutter/2 0 $gutter/2 0px;
|
|
}
|
|
|
|
.small-heading, h4 {
|
|
font-size: 13px;
|
|
font-family: $header_font;
|
|
text-transform: uppercase;
|
|
color: $color_darkblue;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.nav-group-tasks {
|
|
margin: $gutter/2 0;
|
|
padding: 0 0 0 0;
|
|
}
|
|
|
|
.nav-group-task {
|
|
font-size: 1em;
|
|
list-style-type: none;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: $navigation_task_color;
|
|
}
|
|
|
|
%nav-group-task-gloss {
|
|
color: $navigation_gloss_color;
|
|
font-size: 90%;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.nav-group-task[data-url^="Protocols/"] > .nav-group-task-link::after {
|
|
@extend %nav-group-task-gloss;
|
|
content: "(Protocol)";
|
|
}
|
|
|
|
.nav-group-task[data-name="MGLForegroundStyleLayer"],
|
|
.nav-group-task[data-name="MGLMultiPoint"],
|
|
.nav-group-task[data-name="MGLShape"],
|
|
.nav-group-task[data-name="MGLSource"],
|
|
.nav-group-task[data-name="MGLStyleFunction"],
|
|
.nav-group-task[data-name="MGLStyleLayer"],
|
|
.nav-group-task[data-name="MGLTileSource"],
|
|
.nav-group-task[data-name="MGLVectorStyleLayer"] {
|
|
.nav-group-task-link::after {
|
|
@extend %nav-group-task-gloss;
|
|
content: "(Abstract Class)";
|
|
}
|
|
}
|
|
|
|
.nav-group-name > .small-heading,
|
|
.nav-group-task-link {
|
|
display: block;
|
|
}
|
|
|
|
.nav-group-task-link {
|
|
color: $color_darkblue_lighten;
|
|
}
|
|
// ===========================================================================
|
|
//
|
|
// Content
|
|
//
|
|
// ===========================================================================
|
|
|
|
.main-content {
|
|
order: 1;
|
|
@media (min-width: 768px) {
|
|
order: 2;
|
|
flex: 1;
|
|
padding-bottom: 60px;
|
|
max-width: 80%;
|
|
}
|
|
}
|
|
|
|
.section {
|
|
padding: 0px 20px;
|
|
@media (max-width: 768px) {
|
|
padding: inherit;
|
|
}
|
|
}
|
|
|
|
.section-content {
|
|
margin: 0 auto;
|
|
padding: $gutter 0;
|
|
border-bottom: 1px solid $keyline_color;
|
|
}
|
|
|
|
.section-content img {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-name {
|
|
color: $section_name_color;
|
|
display: block;
|
|
}
|
|
|
|
.anchor-icon {
|
|
margin-left: 4px;
|
|
opacity: 0.7;
|
|
display: inline-block;
|
|
background: url("../img/link.svg");
|
|
background-repeat: no-repeat;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
h1 > .anchor-icon { margin-bottom: 2px; }
|
|
.declaration .highlight {
|
|
font-size: 15px;
|
|
overflow-x: initial; // This allows the scrollbar to show up inside declarations
|
|
padding: $gutter/2 0;
|
|
line-height: 20px;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.highlight a { text-decoration: underline; }
|
|
|
|
.task-group-section {
|
|
border-top: $gray_border;
|
|
}
|
|
|
|
.task-group {
|
|
padding-top: 0px;
|
|
}
|
|
|
|
.task-name-container {
|
|
a[name] {
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
list-style-type: none;
|
|
|
|
a[name] {
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.token {
|
|
margin-left: 0px;
|
|
font-size: 13px;
|
|
display: flex;
|
|
padding: 5px 0px;
|
|
line-height: 14px;
|
|
}
|
|
.token-name {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.token-icon {
|
|
background: url('../img/plus.svg');
|
|
width: 17px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
height: 13px;
|
|
opacity: 1;
|
|
margin-left: 5px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.token-icon-minus {
|
|
background: url('../img/minus.svg');
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.declaration-note {
|
|
font-size: 13px;
|
|
color: #808080;
|
|
font-style: italic;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.pointer-container {
|
|
border-bottom: $gray_border;
|
|
left: -23px;
|
|
padding-bottom: 13px;
|
|
position: relative;
|
|
width: 110%;
|
|
}
|
|
|
|
.pointer {
|
|
left: 21px;
|
|
top: 7px;
|
|
display: block;
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-left: 1px solid $declaration_border_color;
|
|
border-top: 1px solid $declaration_border_color;
|
|
background: $declaration_bg_color;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.height-container {
|
|
display: none;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
.section {
|
|
background: $declaration_bg_color;
|
|
border: 1px solid $keyline_color;
|
|
padding: 15px 20px;
|
|
border-radius: 4px;
|
|
margin: 10px 0px 30px;
|
|
}
|
|
}
|
|
|
|
.aside, .language {
|
|
padding: 6px 12px;
|
|
margin: 12px 0;
|
|
border-left: $aside_border;
|
|
overflow-y: hidden;
|
|
.aside-title {
|
|
font-size: 10px;
|
|
font-family: $header_font;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
padding: 2px 8px;
|
|
display: inline;
|
|
border-radius: 4px;
|
|
margin: 0;
|
|
-webkit-user-select: none;
|
|
}
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.language {
|
|
background: $color_light;
|
|
border-radius: 4px;
|
|
border-left: $declaration_language_border;
|
|
}
|
|
|
|
.aside.aside-see, .aside.aside-note, {
|
|
background: $color_light;
|
|
border-radius: 4px;
|
|
.aside-title {
|
|
padding-left: 0px;
|
|
}
|
|
}
|
|
|
|
.aside-warning {
|
|
border-left: $aside_warning_border;
|
|
.aside-title {
|
|
color: $aside_warning_color;
|
|
}
|
|
}
|
|
|
|
.graybox {
|
|
width: 100%;
|
|
border-collapse:separate;
|
|
border:solid $keyline_color 1px;
|
|
border-radius:6px;
|
|
-moz-border-radius:6px;
|
|
p {
|
|
margin: 0;
|
|
word-break: break-word;
|
|
min-width: 50px;
|
|
}
|
|
td {
|
|
padding: 5px 25px 5px 10px;
|
|
vertical-align: middle;
|
|
}
|
|
tr td:first-of-type {
|
|
text-align: right;
|
|
padding: 7px;
|
|
vertical-align: top;
|
|
word-break: normal;
|
|
width: 40px;
|
|
border-left: none;
|
|
border-top: none;
|
|
}
|
|
th, td {
|
|
border-right:none;
|
|
border-top: none;
|
|
}
|
|
td:first-child, th:first-child {
|
|
border-left: none;
|
|
}
|
|
tr:last-of-type td {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.show-on-github-icon {
|
|
width: 16px;
|
|
display: inline-block !important;
|
|
vertical-align: -3px;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.show-on-github a {
|
|
margin: 10px 0 10px;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
}
|
|
|
|
|
|
// ===========================================================================
|
|
//
|
|
// Footer
|
|
//
|
|
// ===========================================================================
|
|
|
|
.footer {
|
|
border-top: 1px $keyline_color solid;
|
|
padding: $gutter/2 $gutter;
|
|
color: $footer_text_color;
|
|
|
|
p {
|
|
display: inline;
|
|
}
|
|
|
|
a {
|
|
color: $footer_link_color;
|
|
}
|
|
}
|
|
|
|
|
|
// ===========================================================================
|
|
//
|
|
// Dash
|
|
//
|
|
// ===========================================================================
|
|
|
|
html.dash {
|
|
|
|
.header, .breadcrumbs, .navigation {
|
|
display: none;
|
|
}
|
|
|
|
.height-container {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
// ===========================================================================
|
|
//
|
|
// Fonts
|
|
//
|
|
// ===========================================================================
|
|
|
|
@font-face {
|
|
font-family:'Open Sans';
|
|
src:url('../fonts/opensans-regular.eot');
|
|
src:url('../fonts/opensans-regular.eot#iefix') format('embedded-opentype'),
|
|
url('../fonts/opensans-regular.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family:'Open Sans Bold';
|
|
src:url('../fonts/opensans-bold.eot');
|
|
src:url('../fonts/opensans-bold.eot#iefix') format('embedded-opentype'),
|
|
url('../fonts/opensans-bold.woff') format('woff');
|
|
}
|
|
|
|
|
|
.strong { font-family: $header_font;}
|
|
.text-purple { color: $purple; }
|
|
.text-blue { color: $blue; }
|
|
.keyline-purple { border-color: $purple; }
|
|
.keyline-blue { border-color: $blue; }
|
|
|