arctic-ui 0.1.0

data/documentation/source/stylesheets/_rtl.scss

@@ -0,0 +1,140 @@
+////////////////////////////////////////////////////////////////////////////////
+// RTL Styles Variables
+////////////////////////////////////////////////////////////////////////////////
+
+$default: auto;
+
+////////////////////////////////////////////////////////////////////////////////
+// TABLE OF CONTENTS
+////////////////////////////////////////////////////////////////////////////////
+
+#toc>ul>li>a>span {
+    float: left;
+}
+
+.toc-wrapper {
+    transition: right 0.3s ease-in-out !important;
+    left: $default !important;
+    #{right}: 0;
+}
+
+.toc-h2 {
+    padding-#{right}: $nav-padding + $nav-indent;
+}
+
+#nav-button {
+    #{right}: 0;
+    transition: right 0.3s ease-in-out;
+    &.open {
+        right: $nav-width
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// PAGE LAYOUT AND CODE SAMPLE BACKGROUND
+////////////////////////////////////////////////////////////////////////////////
+.page-wrapper {
+    margin-#{left}: $default !important;
+    margin-#{right}: $nav-width;
+    .dark-box {
+        #{right}: $default;
+        #{left}: 0;
+    }
+}
+
+.lang-selector {
+    width: $default !important;
+    a {
+        float: right;
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// CODE SAMPLE STYLES
+////////////////////////////////////////////////////////////////////////////////
+.content {
+    &>h1,
+    &>h2,
+    &>h3,
+    &>h4,
+    &>h5,
+    &>h6,
+    &>p,
+    &>table,
+    &>ul,
+    &>ol,
+    &>aside,
+    &>dl {
+        margin-#{left}: $examples-width;
+        margin-#{right}: $default !important;
+    }
+    &>ul,
+    &>ol {
+        padding-#{right}: $main-padding + 15px;
+    }
+    table {
+        th,
+        td {
+            text-align: right;
+        }
+    }
+    dd {
+        margin-#{right}: 15px;
+    }
+    aside {
+        aside:before {
+            padding-#{left}: 0.5em;
+        }
+        .search-highlight {
+            background: linear-gradient(to top right, #F7E633 0%, #F1D32F 100%);
+        }
+    }
+    pre,
+    blockquote {
+        float: left !important;
+        clear: left !important;
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// TYPOGRAPHY
+////////////////////////////////////////////////////////////////////////////////
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+aside {
+    text-align: right;
+    direction: rtl;
+}
+
+.toc-wrapper {
+    text-align: right;
+    direction: rtl;
+    font-weight: 100 !important;
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// RESPONSIVE DESIGN
+////////////////////////////////////////////////////////////////////////////////
+@media (max-width: $tablet-width) {
+    .toc-wrapper {
+        #{right}: -$nav-width;
+        &.open {
+            #{right}: 0;
+        }
+    }
+    .page-wrapper {
+        margin-#{right}: 0;
+    }
+}
+
+@media (max-width: $phone-width) {
+    %left-col {
+        margin-#{left}: 0;
+    }
+}

data/documentation/source/stylesheets/_variables.scss

@@ -0,0 +1,103 @@
+/*
+Copyright 2008-2013 Concur Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may
+not use this file except in compliance with the License. You may obtain
+a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+*/
+
+
+////////////////////////////////////////////////////////////////////////////////
+// CUSTOMIZE SLATE
+////////////////////////////////////////////////////////////////////////////////
+// Use these settings to help adjust the appearance of Slate
+
+
+// BACKGROUND COLORS
+////////////////////
+$nav-bg: #2d3033 !default;
+$examples-bg: #2E3336 !default;
+$code-bg: #2d3033 !default;
+$code-annotation-bg: #191D1F !default;
+$nav-subitem-bg: #1E2224 !default;
+$nav-active-bg: #2B4C56 !default;
+$nav-active-parent-bg: #2B4C56 !default; // parent links of the current section
+$lang-select-border: #000 !default;
+$lang-select-bg: #1E2224 !default;
+$lang-select-active-bg: $examples-bg !default; // feel free to change this to blue or something
+$lang-select-pressed-bg: #111 !default; // color of language tab bg when mouse is pressed
+$main-bg: #F3F7F9 !default;
+$aside-notice-bg: #8fbcd4 !default;
+$aside-warning-bg: #c97a7e !default;
+$aside-success-bg: #6ac174 !default;
+$search-notice-bg: #c97a7e !default;
+
+
+// TEXT COLORS
+////////////////////
+$main-text: #333 !default; // main content text color
+$nav-text: #fff !default;
+$nav-active-text: #fff !default;
+$nav-active-parent-text: #fff !default; // parent links of the current section
+$lang-select-text: #fff !default; // color of unselected language tab text
+$lang-select-active-text: #fff !default; // color of selected language tab text
+$lang-select-pressed-text: #fff !default; // color of language tab text when mouse is pressed
+
+
+// SIZES
+////////////////////
+$nav-width: 230px !default; // width of the navbar
+$examples-width: 50% !default; // portion of the screen taken up by code examples
+$logo-margin: 0px !default; // margin below logo
+$main-padding: 28px !default; // padding to left and right of content & examples
+$nav-padding: 15px !default; // padding to left and right of navbar
+$nav-v-padding: 10px !default; // padding used vertically around search boxes and results
+$nav-indent: 10px !default; // extra padding for ToC subitems
+$code-annotation-padding: 13px !default; // padding inside code annotations
+$h1-margin-bottom: 21px !default; // padding under the largest header tags
+$tablet-width: 930px !default; // min width before reverting to tablet size
+$phone-width: $tablet-width - $nav-width !default; // min width before reverting to mobile size
+
+
+// FONTS
+////////////////////
+%default-font {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 14px;
+}
+
+%header-font {
+  @extend %default-font;
+  font-weight: bold;
+}
+
+%code-font {
+  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+
+// OTHER
+////////////////////
+$nav-footer-border-color: #666 !default;
+$search-box-border-color: #666 !default;
+
+
+////////////////////////////////////////////////////////////////////////////////
+// INTERNAL
+////////////////////////////////////////////////////////////////////////////////
+// These settings are probably best left alone.
+
+%break-words {
+    word-break: break-all;
+    hyphens: auto;
+}

data/documentation/source/stylesheets/_variables2.scss

@@ -0,0 +1,147 @@
+/*
+Copyright 2008-2013 Concur Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may
+not use this file except in compliance with the License. You may obtain
+a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+*/
+
+
+////////////////////////////////////////////////////////////////////////////////
+// CUSTOMIZE SLATE
+////////////////////////////////////////////////////////////////////////////////
+// Use these settings to help adjust the appearance of Slate
+
+// TG COLORS
+////////////////////
+$tg-green: #70cf32;
+$tg-dark-green: #61b729;
+$tg-slate: #2d3033;
+$tg-grey: #6c7279;
+$tg-teal: #65d5d9;
+$tg-red: #f6574d;
+$tg-bermuda-green: #7be3bd;
+$base-grey-10: #f4f4f5;
+$base-grey-5: rgba($base-grey-10, .5);
+$base-grey-30: #e2e6e8;
+$base-grey-70: #a4aeb3;
+$white: #ffffff;
+$black: #000000;
+
+// BACKGROUND COLORS
+////////////////////
+$nav-bg: $white;
+$examples-bg: #2b4c56;
+$code-bg: $tg-slate;
+$code-annotation-bg: #244048;
+$search-highlight: rgba($tg-bermuda-green, .3);
+$nav-subitem-bg: #fff;
+$lang-select-border: #000;
+$lang-select-bg: #222;
+$lang-select-active-bg: #f6574d; // feel free to change this to blue or something
+$lang-select-pressed-bg: $code-annotation-bg; // color of language tab bg when mouse is pressed
+$main-bg: $white;
+$aside-notice-bg: #429BCE;
+$aside-warning-bg: #E1AD05;
+$aside-success-bg: #6ac174;
+$search-notice-bg: #c97a7e;
+
+
+// TEXT COLORS
+////////////////////
+$main-text: $tg-slate; // main content text color
+$nav-text: $tg-grey;
+$nav-active-text: $main-text;
+$nav-footer-text: $base-grey-70;
+$content-link: $tg-green;
+$content-link-hover: $tg-dark-green;
+$code: $tg-red;
+$lang-select-text: $white; // color of unselected language tab text
+$lang-select-active-text: $white; // color of selected language tab text
+$lang-select-pressed-text: $white; // color of language tab text when mouse is pressed
+
+
+// SIZES
+////////////////////
+$nav-width: 230px; // width of the navbar
+$examples-width: 50%; // portion of the screen taken up by code examples
+$logo-margin: 20px; // margin between nav items and logo, ignored if search is active
+$main-padding: 28px; // padding to left and right of content & examples
+$nav-padding: 10px; // padding to left and right of navbar
+$nav-v-padding: 5px; // padding used vertically around search boxes and results
+$nav-indent: 10px; // extra padding for ToC subitems
+$code-annotation-padding: 13px; // padding inside code annotations
+$h1-margin-bottom: 21px; // padding under the largest header tags
+$tablet-width: 930px; // min width before reverting to tablet size
+$phone-width: $tablet-width - $nav-width; // min width before reverting to mobile size
+
+
+// FONTS
+////////////////////
+%base-font {
+  font-size: 14px;
+}
+
+%nav-font {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+%small-font {
+  font-size: 12px;
+}
+
+%label-font {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+%default-font {
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
+  @extend %base-font;
+}
+
+%header-font {
+  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
+  font-weight: 300;
+}
+
+%code-font {
+  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
+  line-height: 1.5;
+  color: $code;
+
+  @extend %small-font;
+}
+
+
+// OTHER
+////////////////////
+$border-radius: 3px;
+$border-color: $base-grey-30;
+$solid-border: 1px solid $border-color;
+$dotted-border: 1px dotted $border-color;
+
+
+////////////////////////////////////////////////////////////////////////////////
+// INTERNAL
+////////////////////////////////////////////////////////////////////////////////
+// These settings are probably best left alone.
+
+%break-words {
+     word-break: break-all;
+
+     /* Non standard for webkit */
+     word-break: break-word;
+
+        hyphens: auto;
+}

data/documentation/source/stylesheets/print.css.scss

@@ -0,0 +1,148 @@
+@charset "utf-8";
+@import 'normalize';
+// @import 'variables'; revert to tripit defaults
+@import 'variables2'; // tradegecko overrides
+@import 'icon-font';
+
+/*
+Copyright 2008-2013 Concur Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may
+not use this file except in compliance with the License. You may obtain
+a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+*/
+
+$print-color: #999;
+$print-color-light: #ccc;
+$print-font-size: 12px;
+
+body {
+  @extend %default-font;
+}
+
+.toc, .toc-footer, .lang-selector, .search, #nav-button {
+  display: none;
+}
+
+.toc-wrapper>img {
+  margin: 0 auto;
+  display: block;
+}
+
+.content {
+  font-size: 12px;
+
+  pre, code {
+    @extend %code-font;
+    @extend %break-words;
+    border: 1px solid $print-color;
+    border-radius: 5px;
+    font-size: 0.8em;
+  }
+
+  pre {
+    code {
+      border: 0;
+    }
+  }
+
+  pre {
+    padding: 1.3em;
+  }
+
+  code {
+    padding: 0.2em;
+  }
+
+  table {
+    border: 1px solid $print-color;
+    tr {
+      border-bottom: 1px solid $print-color;
+    }
+    td,th {
+      padding: 0.7em;
+    }
+  }
+
+  p {
+    line-height: 1.5;
+  }
+
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  h1 {
+    @extend %header-font;
+    font-size: 2.5em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    margin-top: 1em;
+    margin-bottom: $h1-margin-bottom;
+    border: 2px solid $print-color-light;
+    border-width: 2px 0;
+    text-align: center;
+  }
+
+  h2 {
+    @extend %header-font;
+    font-size: 1.8em;
+    margin-top: 2em;
+    border-top: 2px solid $print-color-light;
+    padding-top: 0.8em;
+  }
+
+  h1+h2, h1+div+h2 {
+    border-top: none;
+    padding-top: 0;
+    margin-top: 0;
+  }
+
+  h3, h4 {
+    @extend %header-font;
+    font-size: 0.8em;
+    margin-top: 1.5em;
+    margin-bottom: 0.8em;
+    text-transform: uppercase;
+  }
+
+  h5, h6 {
+    text-transform: uppercase;
+  }
+
+  aside {
+    padding: 1em;
+    border: 1px solid $print-color-light;
+    border-radius: 5px;
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    line-height: 1.6;
+  }
+
+  aside:before {
+    vertical-align: middle;
+    padding-right: 0.5em;
+    font-size: 14px;
+  }
+
+  aside.notice:before {
+    @extend %icon-info-sign;
+  }
+
+  aside.warning:before {
+    @extend %icon-exclamation-sign;
+  }
+
+  aside.success:before {
+    @extend %icon-ok-sign;
+  }
+}