Sassplate
- v1.0.0
+ v1.1.0
diff --git a/docs/odo-sassplate/colors.html b/docs/odo-sassplate/colors.html
index b6d02d5..0670895 100644
--- a/docs/odo-sassplate/colors.html
+++ b/docs/odo-sassplate/colors.html
@@ -56,10 +56,11 @@
-
+
- blue-dk
- #005992
+ blue-dark
+
+ #005992
@@ -70,7 +71,8 @@
blue
- #1b9ec6
+
+ #1b9ec6
@@ -78,10 +80,11 @@
-
+
- purple-dk
- #711471
+ purple-dark
+
+ #711471
purple
- #a14fa8
+
+ #a14fa8
@@ -103,7 +107,8 @@
teal
- #00a38a
+
+ #00a38a
@@ -114,7 +119,8 @@
lime
- #b2bb21
+
+ #b2bb21
@@ -135,7 +141,8 @@
white
- #ffffff
+
+ #ffffff
@@ -146,7 +153,8 @@
gray90
- #edf0f1
+
+ #edf0f1
@@ -157,7 +165,8 @@
gray80
- #dfe4e6
+
+ #dfe4e6
@@ -168,7 +177,8 @@
gray70
- #bec5c7
+
+ #bec5c7
@@ -179,7 +189,8 @@
gray60
- #919698
+
+ #919698
@@ -190,7 +201,8 @@
gray40
- #61686a
+
+ #61686a
@@ -201,7 +213,8 @@
gray30
- #30373d
+
+ #30373d
@@ -212,7 +225,8 @@
gray20
- #242a2f
+
+ #242a2f
@@ -223,7 +237,8 @@
black
- #000000
+
+ #000000
@@ -234,7 +249,8 @@
grayblue40
- #526675
+
+ #526675
@@ -245,7 +261,8 @@
grayblue30
- #3e4d5a
+
+ #3e4d5a
@@ -256,7 +273,8 @@
grayblue20
- #2b343c
+
+ #2b343c
@@ -277,7 +295,8 @@
blue--purple
- #389dd3 to #6645ae
+
+ #389dd3 to #6645ae
@@ -288,7 +307,8 @@
teal--blue
- #00a38a to #389dd3
+
+ #00a38a to #389dd3
@@ -299,7 +319,8 @@
white--gray90
- #ffffff to #edf0f1
+
+ #ffffff to #edf0f1
@@ -310,7 +331,8 @@
red--orange
- #d9122e to #f6543a
+
+ #d9122e to #f6543a
diff --git a/docs/odo-sassplate/css-utilities.html b/docs/odo-sassplate/css-utilities.html
index ac93d30..bc1be71 100644
--- a/docs/odo-sassplate/css-utilities.html
+++ b/docs/odo-sassplate/css-utilities.html
@@ -162,7 +162,7 @@
- An object (like an image) and content to the right or left. Source
+ An object (like an image) and content to the right or left. Source
Heads up! For this method to work, the image cannot have max-width: 100%; so it is set to none. Hi resolution images may grow larger than you expect. To avoid this, set a width on the image.
diff --git a/docs/odo-sassplate/css/docs.css b/docs/odo-sassplate/css/docs.css
index b72812d..2ee738b 100644
--- a/docs/odo-sassplate/css/docs.css
+++ b/docs/odo-sassplate/css/docs.css
@@ -184,23 +184,21 @@ pre[class*="language-"] {
font-size: 14px; } }
.docs-type-label-1 {
+ margin-top: 24px;
margin-bottom: 8px;
- font-family: Menlo, "Lucida Console", Monaco, monospace;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 16px;
font-weight: bold;
- font-size: 13px;
color: black; }
- @media screen and (min-width: 768px) {
- .docs-type-label-1 {
- font-size: 13px; } }
-.docs-type-property {
+.docs-type-label-2.docs-type-label-2 {
+ margin-top: 16px;
margin-bottom: 8px;
- font-family: Menlo, "Lucida Console", Monaco, monospace;
- font-size: 13px;
- color: #333333; }
- @media screen and (min-width: 768px) {
- .docs-type-property {
- font-size: 13px; } }
+ color: black;
+ background: none; }
+
+.docs-type-property {
+ margin-bottom: 8px; }
.docs-type-body-1 {
margin-top: 0;
@@ -252,6 +250,7 @@ code:not([class*="language"]) {
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
+ color: #262626;
font-size: 85%;
background-color: rgba(27, 31, 35, 0.05);
border-radius: 3px;
@@ -286,8 +285,7 @@ pre[class*="language-"].no-language > code[data-language]::before {
z-index: 5; }
.docs-type-property {
- display: block !important;
- font-size: 10px; }
+ display: block !important; }
.docs-simplesheet__section {
margin-bottom: 5rem; }
@@ -297,14 +295,14 @@ pre[class*="language-"].no-language > code[data-language]::before {
.docs-specsheet__row {
position: relative; }
- .docs-specsheet__row:before {
+ .docs-specsheet__row::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
- border-top: solid 1px #b2b2b2;
+ border-top: 2px solid #ff4843;
z-index: 2; }
.docs-specsheet__col-left {
@@ -323,11 +321,8 @@ pre[class*="language-"].no-language > code[data-language]::before {
background: gray;
border-left: dotted 1px rgba(128, 128, 128, 0.6); }
-.docs-specsheet__row--modifier:before {
- border-top: dotted 1px rgba(102, 102, 102, 0.6); }
-
-.docs-specsheet__row--modifier .docs-specsheet__col-left:before {
- border-top: dotted 1px rgba(102, 102, 102, 0.6); }
+.docs-specsheet__row--related::before {
+ border-top: 1px dotted #b2b2b2; }
@media screen and (min-width: 768px) {
.docs-specsheet__col-right {
@@ -344,8 +339,7 @@ pre[class*="language-"].no-language > code[data-language]::before {
.docs-type-specsheet-header.docs-type--props-section-header {
margin-top: 1.5rem; }
-.docs-type-specsheet-header,
-.docs-type-property {
+.docs-type-specsheet-header {
display: block; }
code.docs-type-property {
@@ -364,13 +358,13 @@ code.docs-type-property {
padding-top: 20px;
padding-left: 14px;
padding-bottom: 1.125rem;
- background: #03a9fa; }
+ background: #ff4843; }
.docs-page-header {
position: relative;
display: block;
padding: 2rem 0 2.5rem;
- background-color: #03a9fa;
+ background-color: #ff4843;
margin-bottom: 3rem; }
.docs-header-link-back {
diff --git a/docs/odo-sassplate/css/docs.css.map b/docs/odo-sassplate/css/docs.css.map
index 1d4450a..a3735f5 100644
--- a/docs/odo-sassplate/css/docs.css.map
+++ b/docs/odo-sassplate/css/docs.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../odo/packages/odo-sassplate/node_modules/prismjs/themes/prism.css","_type.scss","_variables.scss","_specsheet.scss","_mixins.scss","docs.scss","_header.scss","pages/_index.scss","pages/_grid.scss","pages/_colors.scss","pages/_css-utilities.scss"],"names":[],"mappings":"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","file":"docs.css","sourcesContent":["/**\n * prism.js default theme for JavaScript, CSS and HTML\n * Based on dabblet (http://dabblet.com)\n * @author Lea Verou\n */\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tcolor: black;\n\tbackground: none;\n\ttext-shadow: 0 1px white;\n\tfont-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tword-wrap: normal;\n\tline-height: 1.5;\n\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n}\n\npre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection,\ncode[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {\n\ttext-shadow: none;\n\tbackground: #b3d4fc;\n}\n\npre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection,\ncode[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {\n\ttext-shadow: none;\n\tbackground: #b3d4fc;\n}\n\n@media print {\n\tcode[class*=\"language-\"],\n\tpre[class*=\"language-\"] {\n\t\ttext-shadow: none;\n\t}\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tbackground: #f5f2f0;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em;\n\tborder-radius: .3em;\n\twhite-space: normal;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\tcolor: slategray;\n}\n\n.token.punctuation {\n\tcolor: #999;\n}\n\n.namespace {\n\topacity: .7;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.deleted {\n\tcolor: #905;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n\tcolor: #690;\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string {\n\tcolor: #a67f59;\n\tbackground: hsla(0, 0%, 100%, .5);\n}\n\n.token.atrule,\n.token.attr-value,\n.token.keyword {\n\tcolor: #07a;\n}\n\n.token.function {\n\tcolor: #DD4A68;\n}\n\n.token.regex,\n.token.important,\n.token.variable {\n\tcolor: #e90;\n}\n\n.token.important,\n.token.bold {\n\tfont-weight: bold;\n}\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.entity {\n\tcursor: help;\n}\n",".docs-blockquote {\n padding: 0 1rem;\n color: #777;\n border-left: 4px solid #ddd;\n margin: 0 0 1.125rem;\n\n p { margin: 0; }\n}\n\n.docs-type-display-1 {\n margin: 0;\n line-height: 1;\n font-family: $sans-serif;\n font-size: 32px;\n color: white;\n\n @media screen and (min-width: 768px) {\n font-size: 60px;\n }\n}\n\n.docs-type-header-1 {\n margin-top: 0;\n margin-bottom: 0.727em;\n font-family: $sans-serif;\n font-size: 22px;\n color: map-get($docs-colors, docsGray20);\n\n @media screen and (min-width: 768px) {\n font-size: 48px;\n }\n}\n\n.docs-type-header-2 {\n margin-top: 0;\n margin-bottom: 1.6em;\n font-family: $sans-serif;\n font-size: 20px;\n color: map-get($docs-colors, docsGray20);\n\n @media screen and (min-width: 768px) {\n font-size: 36px;\n }\n}\n\n.docs-type-header-4 {\n margin-top: 0;\n margin-bottom: 1em;\n font-family: $sans-serif;\n font-size: 16px;\n color: map-get($docs-colors, docsGray30);\n\n @media screen and (min-width: 768px) {\n font-size: 18px;\n }\n}\n\n.docs-type-subhead-1 {\n margin-top: 0;\n margin-bottom: 10px;\n font-family: $sans-serif;\n text-transform: none;\n font-size: 15px;\n color: white;\n\n @media screen and (min-width: 768px) {\n font-size: 20px;\n }\n}\n\n.docs-type-classname {\n margin-top: 0;\n margin-bottom: 0;\n font-family: $monospace;\n font-weight: bold;\n font-size: 16px;\n color: map-get($docs-colors, black);\n\n @media screen and (min-width: 768px) {\n font-size: 14px;\n }\n}\n\n.docs-type-label-1 {\n margin-bottom: 8px;\n font-family: $monospace;\n font-weight: bold;\n font-size: 13px;\n color: map-get($docs-colors, black);\n\n @media screen and (min-width: 768px) {\n font-size: 13px;\n }\n}\n\n.docs-type-property {\n margin-bottom: 8px;\n font-family: $monospace;\n font-size: 13px;\n color: map-get($docs-colors, docsGray20);\n\n @media screen and (min-width: 768px) {\n font-size: 13px;\n }\n}\n\n.docs-type-body-1 {\n margin-top: 0;\n margin-bottom: 1.125em;\n font-family: $serif;\n font-size: 16px;\n color: map-get($docs-colors, docsGray30);\n\n @media screen and (min-width: 768px) {\n font-size: 18px;\n }\n}\n\n.docs-type-body-2 {\n margin-top: 0;\n margin-bottom: 1.5em;\n font-family: $serif;\n font-size: 14px;\n color: map-get($docs-colors, docsGray30);\n\n @media screen and (min-width: 768px) {\n font-size: 16px;\n }\n}\n\n.docs-type-body-3 {\n margin-top: 0;\n margin-bottom: 1.23em;\n font-family: $serif;\n font-size: 13px;\n color: map-get($docs-colors, docsGray30);\n\n @media screen and (min-width: 768px) {\n font-size: 14px;\n }\n}\n\n.docs-index-text-link {\n font-family: $sans-serif;\n font-size: 18px;\n margin-bottom: 0;\n}\n\n.docs-type-icon-demo-text {\n font-family: $sans-serif;\n color: map-get($docs-colors, docsGray20);\n font-size: 12px;\n margin-top: 0;\n margin-bottom: 10px;\n}\n\n// Docs color modifiers\n.docs-color--white {\n color: white !important;\n}\n\ncode:not([class*=\"language\"]) {\n padding: 0;\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n margin: 0;\n font-size: 85%;\n background-color: rgba(27,31,35,0.05);\n border-radius: 3px;\n font-family: Menlo, Consolas, \"Liberation Mono\", Courier, monospace;\n}\n\ncode:not([class*=\"language\"])::before,\ncode:not([class*=\"language\"])::after {\n content: \"\\00a0\";\n letter-spacing: -.2em;\n}\n\npre[class*=\"language-\"] > code[data-language] {\n overflow: auto;\n}\n\npre[class*=\"language-\"].no-language > code[data-language]::before {\n display: none;\n}\n","\n@if not global-variable-exists(\"theme-color\") {\n @error \"$theme-color variable should be injected with gulp-insert.\";\n}\n\n// Every project has different gray shades, and variables; so rather than change\n// them in the docs for every project, we'll have grays just for docs, that never change,\n// similar to the docs-type-definitions.\n// These are incremented at smaller intervals near the poles & the middle, because\n// those are the places where you'll most often want more granular differentiation.\n\n$docs-colors: (\n theme: $theme-color,\n prism-background: #f5f2f0,\n white: rgb(255, 255, 255),\n docsGray95: rgb(242, 242, 242),\n docsGray90: rgb(229, 229, 229),\n docsGray85: rgb(217, 217, 217),\n docsGray80: rgb(204, 204, 204),\n docsGray75: rgb(192, 192, 192),\n docsGray70: rgb(178, 178, 178),\n docsGray65: rgb(166, 166, 166),\n docsGray60: rgb(153, 153, 153),\n docsGray55: rgb(140, 140, 140),\n docsGray50: rgb(128, 128, 128),\n docsGray45: rgb(115, 115, 115),\n docsGray40: rgb(102, 102, 102),\n docsGray35: rgb(89, 89, 89 ),\n docsGray30: rgb(77, 77, 77 ),\n docsGray25: rgb(64, 64, 64 ),\n docsGray20: rgb(51, 51, 51 ),\n docsGray15: rgb(38, 38, 38 ),\n docsGray10: rgb(26, 26, 26 ),\n docsGray05: rgb(13, 13, 13 ),\n black: rgb(0, 0, 0 )\n);\n\n\n$monospace: Menlo, 'Lucida Console', Monaco, monospace;\n$sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n$serif: Palatino, \"Palatino Linotype\", \"Palatino LT STD\", \"Book Antiqua\", Georgia, serif;\n","\n.docs-dark-block {\n @include docs-dark-block();\n}\n\n.docs-true-text-margins-demo--red-line {\n border-bottom: solid 1px #ff6666;\n display: none;\n\n &.is-visible {\n display: block;\n }\n}\n\n.docs-line-toggler {\n position: fixed;\n right: 10px;\n bottom: 10px;\n z-index: 5;\n}\n\n.docs-type-property {\n display: block !important;\n font-size: 10px;\n}\n\n// A Simplesheet is what I'm calling the dimple docs pages that are mostly editorial,\n// but Editorialsheet seemed a bit verbose. Might rename it later.\n.docs-simplesheet__section {\n margin-bottom: px-rem(80);\n}\n\n// Specsheet Style Layout – 1/4 left properties, 3/4 right samples\n.docs-specsheet__section {\n margin-bottom: px-rem(80);\n}\n\n.docs-specsheet__row {\n position: relative;\n\n // had to moke the border for the right column into a pseudoelement for proper top alignment due to vertical center.\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n border-top: solid 1px map-get($docs-colors, docsGray70);\n z-index: 2;\n }\n}\n\n.docs-specsheet__col-left {\n z-index: 3;\n min-height: 120px;\n}\n\n.docs-specsheet__col-right {\n z-index: 1;\n padding: 70px 16px;\n}\n\n.docs-specsheet__col-right--light {\n background: map-get($docs-colors, docsGray70);\n border-left: dotted 1px rgba(map-get($docs-colors, docsGray80),0.6);\n}\n\n.docs-specsheet__col-right--dark {\n background: map-get($docs-colors, docsGray50);\n border-left: dotted 1px rgba(map-get($docs-colors, docsGray50),0.6);\n}\n\n.docs-specsheet__row--modifier:before {\n border-top: dotted 1px rgba(map-get($docs-colors, docsGray40),0.6);\n}\n\n.docs-specsheet__row--modifier .docs-specsheet__col-left:before {\n border-top: dotted 1px rgba(map-get($docs-colors, docsGray40),0.6);\n}\n\n@include breakpoint(sm) {\n\n .docs-specsheet__col-right {\n align-self: center;\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@include breakpoint(md) {\n\n .docs-specsheet__col-right {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n\n.docs-type-specsheet-header.docs-type--props-section-header {\n margin-top: px-rem(24);\n}\n\n.docs-type-specsheet-header,\n.docs-type-property {\n display: block;\n}\n\ncode.docs-type-property {\n border-radius: 0;\n\n &:first-child {\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n padding-top: 5px;\n }\n &:last-child {\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n padding-bottom: 5px;\n }\n}\n\n.docs-selector-header {\n margin-top: 0;\n padding-top: 20px;\n padding-left: 14px;\n padding-bottom: 1.125rem;\n background: map-get($docs-colors, theme);\n}\n","@mixin docs-dark-block($bordered: true) {\n background-color: map-get($docs-colors, docsGray90);\n color: map-get($docs-colors, docsGray30);\n @if $bordered {\n border: 1px solid map-get($docs-colors, docsGray80);\n }\n}\n\n\n// Copied from sassplate\n@mixin breakpoint($bp, $isMaxWidth: false, $isScreenOnly: true) {\n $breakpoint: map-get((\n xs: 0px,\n sm: 768px,\n md: 1024px\n ), $bp);\n $media: if($isMaxWidth, 'max-width', 'min-width');\n\n @if $isMaxWidth {\n $breakpoint: $breakpoint - 1px;\n }\n\n $media-query: \"(#{$media}: #{$breakpoint})\";\n\n @if $isScreenOnly {\n $media-query: \"screen and #{$media-query}\";\n }\n\n @media #{$media-query} {\n @content;\n }\n}\n\n@function strip-units($number) {\n @return $number / ($number * 0 + 1);\n}\n\n@function px-rem($px, $context: 16) {\n @return strip-units($px) / strip-units($context) + 0rem;\n}\n","$theme-color: #03a9fa;@import \"node_modules/prismjs/themes/prism\";\n\n@import \"mixins\";\n@import \"variables\";\n@import \"type\";\n@import \"specsheet\";\n@import \"header\";\n@import \"pages/index\";\n@import \"pages/grid\";\n@import \"pages/colors\";\n@import \"pages/css-utilities\";\n","\n.docs-page-header {\n position: relative;\n display: block;\n padding: px-rem(32) 0 px-rem(40);\n background-color: map-get($docs-colors, theme);\n margin-bottom: px-rem(48);\n}\n\n.docs-header-link-back {\n display: block;\n margin-bottom: 1rem;\n color: map-get($docs-colors, white);\n text-decoration: none;\n\n .icon {\n fill: white;\n }\n\n &:hover {\n color: map-get($docs-colors, white);\n text-decoration: underline;\n\n .icon {\n transform: translateX(-2px);\n }\n }\n}\n",".docs-index-text-links {\n list-style: none;\n padding: 0;\n margin: 0;\n\n li {\n line-height: 2;\n\n a {\n display: inline-block;\n margin-bottom: 12px;\n }\n }\n\n @include breakpoint(sm) {\n columns: 2;\n column-gap: 16px;\n column-fill: balance;\n }\n}\n","// Grid examples\n.docs-grid-example {\n padding-top: 2rem;\n padding-bottom: 2rem;\n background: map-get($docs-colors, prism-background);\n\n .row:not(:last-child) {\n margin-bottom: px-rem(12);\n }\n}\n\n.docs-grid-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.5rem;\n text-align: center;\n font-family: $monospace;\n font-size: 0.875rem;\n background-color: white;\n border: 1px solid map-get($docs-colors, docsGray80);\n}\n",".docs-color-swatch-wrap {\n margin-bottom: 30px;\n}\n\n.docs-color-swatch {\n margin-bottom: 10px;\n border-radius: 4px;\n}\n\n.docs-color-swatch--dark-bordered {\n box-shadow:inset 0 0 0 1px map-get($docs-colors, docsGray80);\n}\n\n.docs-colors-container {\n padding-top: 1px;\n}\n.docs-color-labels {\n .docs-type-classname.docs-type-classname--blocky {\n font-size: 12px;\n padding: 5px 8px 4px;\n margin-bottom: 6px;\n }\n}\n\n.docs-type-classname--blocky {\n display: inline-block;\n background: white;\n border: solid 1px map-get($docs-colors, gray70);\n border-radius: px-rem(5);\n padding: px-rem(4) px-rem(12);\n margin-bottom: px-rem(10);\n text-align: center;\n}\n","\n\ntable.docs-table {\n font-size: 0.8125rem;\n color: map-get($docs-colors, gray75);\n border: 1px solid map-get($docs-colors, docsGray30);\n border-collapse: collapse;\n width: 100%;\n text-align: center;\n}\n\ntable.docs-table th {\n border-width: 1px;\n padding: 0.5rem;\n border: 1px solid map-get($docs-colors, docsGray70);\n background-color: map-get($docs-colors, docsGray80);\n}\n\ntable.docs-table td {\n border-width: 1px;\n padding: 0.5rem;\n border: 1px solid map-get($docs-colors, docsGray70);\n background-color: map-get($docs-colors, white);\n}\n\n\n.docs-media-object-example,\n.docs-flag-object-example {\n img {\n border: 1px solid map-get($docs-colors, docsGray70);\n }\n}\n"]}
\ No newline at end of file
+{"version":3,"sources":["../../odo/packages/odo-sassplate/node_modules/prismjs/themes/prism.css","_type.scss","_variables.scss","_specsheet.scss","_mixins.scss","docs.scss","_header.scss","pages/_index.scss","pages/_grid.scss","pages/_colors.scss","pages/_css-utilities.scss"],"names":[],"mappings":"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","file":"docs.css","sourcesContent":["/**\n * prism.js default theme for JavaScript, CSS and HTML\n * Based on dabblet (http://dabblet.com)\n * @author Lea Verou\n */\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tcolor: black;\n\tbackground: none;\n\ttext-shadow: 0 1px white;\n\tfont-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tword-wrap: normal;\n\tline-height: 1.5;\n\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n}\n\npre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection,\ncode[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {\n\ttext-shadow: none;\n\tbackground: #b3d4fc;\n}\n\npre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection,\ncode[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {\n\ttext-shadow: none;\n\tbackground: #b3d4fc;\n}\n\n@media print {\n\tcode[class*=\"language-\"],\n\tpre[class*=\"language-\"] {\n\t\ttext-shadow: none;\n\t}\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tbackground: #f5f2f0;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em;\n\tborder-radius: .3em;\n\twhite-space: normal;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\tcolor: slategray;\n}\n\n.token.punctuation {\n\tcolor: #999;\n}\n\n.namespace {\n\topacity: .7;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.deleted {\n\tcolor: #905;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n\tcolor: #690;\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string {\n\tcolor: #a67f59;\n\tbackground: hsla(0, 0%, 100%, .5);\n}\n\n.token.atrule,\n.token.attr-value,\n.token.keyword {\n\tcolor: #07a;\n}\n\n.token.function {\n\tcolor: #DD4A68;\n}\n\n.token.regex,\n.token.important,\n.token.variable {\n\tcolor: #e90;\n}\n\n.token.important,\n.token.bold {\n\tfont-weight: bold;\n}\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.entity {\n\tcursor: help;\n}\n",".docs-blockquote {\n padding: 0 1rem;\n color: #777;\n border-left: 4px solid #ddd;\n margin: 0 0 1.125rem;\n\n p { margin: 0; }\n}\n\n.docs-type-display-1 {\n margin: 0;\n line-height: 1;\n font-family: $sans-serif;\n font-size: 32px;\n color: white;\n\n @media screen and (min-width: 768px) {\n font-size: 60px;\n }\n}\n\n.docs-type-header-1 {\n margin-top: 0;\n margin-bottom: 0.727em;\n font-family: $sans-serif;\n font-size: 22px;\n color: map-get($docs-colors, docsGray20);\n\n @media screen and (min-width: 768px) {\n font-size: 48px;\n }\n}\n\n.docs-type-header-2 {\n margin-top: 0;\n margin-bottom: 1.6em;\n font-family: $sans-serif;\n font-size: 20px;\n color: map-get($docs-colors, docsGray20);\n\n @media screen and (min-width: 768px) {\n font-size: 36px;\n }\n}\n\n.docs-type-header-4 {\n margin-top: 0;\n margin-bottom: 1em;\n font-family: $sans-serif;\n font-size: 16px;\n color: map-get($docs-colors, docsGray30);\n\n @media screen and (min-width: 768px) {\n font-size: 18px;\n }\n}\n\n.docs-type-subhead-1 {\n margin-top: 0;\n margin-bottom: 10px;\n font-family: $sans-serif;\n text-transform: none;\n font-size: 15px;\n color: white;\n\n @media screen and (min-width: 768px) {\n font-size: 20px;\n }\n}\n\n.docs-type-classname {\n margin-top: 0;\n margin-bottom: 0;\n font-family: $monospace;\n font-weight: bold;\n font-size: 16px;\n color: map-get($docs-colors, black);\n\n @media screen and (min-width: 768px) {\n font-size: 14px;\n }\n}\n\n.docs-type-label-1 {\n margin-top: 24px;\n margin-bottom: 8px;\n font-family: $sans-serif;\n font-size: 16px;\n font-weight: bold;\n color: map-get($docs-colors, black);\n}\n\n.docs-type-label-2.docs-type-label-2 {\n margin-top: 16px;\n margin-bottom: 8px;\n color: map-get($docs-colors, black);\n background: none;\n}\n\n.docs-type-property {\n margin-bottom: 8px;\n}\n\n.docs-type-body-1 {\n margin-top: 0;\n margin-bottom: 1.125em;\n font-family: $serif;\n font-size: 16px;\n color: map-get($docs-colors, docsGray30);\n\n @media screen and (min-width: 768px) {\n font-size: 18px;\n }\n}\n\n.docs-type-body-2 {\n margin-top: 0;\n margin-bottom: 1.5em;\n font-family: $serif;\n font-size: 14px;\n color: map-get($docs-colors, docsGray30);\n\n @media screen and (min-width: 768px) {\n font-size: 16px;\n }\n}\n\n.docs-type-body-3 {\n margin-top: 0;\n margin-bottom: 1.23em;\n font-family: $serif;\n font-size: 13px;\n color: map-get($docs-colors, docsGray30);\n\n @media screen and (min-width: 768px) {\n font-size: 14px;\n }\n}\n\n.docs-index-text-link {\n font-family: $sans-serif;\n font-size: 18px;\n margin-bottom: 0;\n}\n\n.docs-type-icon-demo-text {\n font-family: $sans-serif;\n color: map-get($docs-colors, docsGray20);\n font-size: 12px;\n margin-top: 0;\n margin-bottom: 10px;\n}\n\n// Docs color modifiers\n.docs-color--white {\n color: white !important;\n}\n\ncode:not([class*=\"language\"]) {\n padding: 0;\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n margin: 0;\n color: map-get($docs-colors, docsGray15);\n font-size: 85%;\n background-color: rgba(27,31,35,0.05);\n border-radius: 3px;\n font-family: Menlo, Consolas, \"Liberation Mono\", Courier, monospace;\n}\n\ncode:not([class*=\"language\"])::before,\ncode:not([class*=\"language\"])::after {\n content: \"\\00a0\";\n letter-spacing: -.2em;\n}\n\npre[class*=\"language-\"] > code[data-language] {\n overflow: auto;\n}\n\npre[class*=\"language-\"].no-language > code[data-language]::before {\n display: none;\n}\n","\n@if not global-variable-exists(\"theme-color\") {\n @error \"$theme-color variable should be injected with gulp-insert.\";\n}\n\n// Every project has different gray shades, and variables; so rather than change\n// them in the docs for every project, we'll have grays just for docs, that never change,\n// similar to the docs-type-definitions.\n// These are incremented at smaller intervals near the poles & the middle, because\n// those are the places where you'll most often want more granular differentiation.\n\n$docs-colors: (\n theme: $theme-color,\n prism-background: #f5f2f0,\n white: rgb(255, 255, 255),\n docsGray95: rgb(242, 242, 242),\n docsGray90: rgb(229, 229, 229),\n docsGray85: rgb(217, 217, 217),\n docsGray80: rgb(204, 204, 204),\n docsGray75: rgb(192, 192, 192),\n docsGray70: rgb(178, 178, 178),\n docsGray65: rgb(166, 166, 166),\n docsGray60: rgb(153, 153, 153),\n docsGray55: rgb(140, 140, 140),\n docsGray50: rgb(128, 128, 128),\n docsGray45: rgb(115, 115, 115),\n docsGray40: rgb(102, 102, 102),\n docsGray35: rgb(89, 89, 89 ),\n docsGray30: rgb(77, 77, 77 ),\n docsGray25: rgb(64, 64, 64 ),\n docsGray20: rgb(51, 51, 51 ),\n docsGray15: rgb(38, 38, 38 ),\n docsGray10: rgb(26, 26, 26 ),\n docsGray05: rgb(13, 13, 13 ),\n black: rgb(0, 0, 0 )\n);\n\n\n$monospace: Menlo, 'Lucida Console', Monaco, monospace;\n$sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n$serif: Palatino, \"Palatino Linotype\", \"Palatino LT STD\", \"Book Antiqua\", Georgia, serif;\n","\n.docs-dark-block {\n @include docs-dark-block();\n}\n\n.docs-true-text-margins-demo--red-line {\n border-bottom: solid 1px #ff6666;\n display: none;\n\n &.is-visible {\n display: block;\n }\n}\n\n.docs-line-toggler {\n position: fixed;\n right: 10px;\n bottom: 10px;\n z-index: 5;\n}\n\n.docs-type-property {\n display: block !important;\n}\n\n// A Simplesheet is what I'm calling the dimple docs pages that are mostly editorial,\n// but Editorialsheet seemed a bit verbose. Might rename it later.\n.docs-simplesheet__section {\n margin-bottom: px-rem(80);\n}\n\n// Specsheet Style Layout – 1/4 left properties, 3/4 right samples\n.docs-specsheet__section {\n margin-bottom: px-rem(80);\n}\n\n.docs-specsheet__row {\n position: relative;\n\n // had to moke the border for the right column into a pseudoelement for proper top alignment due to vertical center.\n &::before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n border-top: 2px solid map-get($docs-colors, theme);\n z-index: 2;\n }\n}\n\n.docs-specsheet__col-left {\n z-index: 3;\n min-height: 120px;\n}\n\n.docs-specsheet__col-right {\n z-index: 1;\n padding: 70px 16px;\n}\n\n.docs-specsheet__col-right--light {\n background: map-get($docs-colors, docsGray70);\n border-left: dotted 1px rgba(map-get($docs-colors, docsGray80), 0.6);\n}\n\n.docs-specsheet__col-right--dark {\n background: map-get($docs-colors, docsGray50);\n border-left: dotted 1px rgba(map-get($docs-colors, docsGray50), 0.6);\n}\n\n.docs-specsheet__row--related::before {\n border-top: 1px dotted map-get($docs-colors, docsGray70);\n}\n\n@include breakpoint(sm) {\n\n .docs-specsheet__col-right {\n align-self: center;\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@include breakpoint(md) {\n\n .docs-specsheet__col-right {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n\n.docs-type-specsheet-header.docs-type--props-section-header {\n margin-top: px-rem(24);\n}\n\n.docs-type-specsheet-header {\n display: block;\n}\n\ncode.docs-type-property {\n border-radius: 0;\n\n &:first-child {\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n padding-top: 5px;\n }\n &:last-child {\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n padding-bottom: 5px;\n }\n}\n\n.docs-selector-header {\n margin-top: 0;\n padding-top: 20px;\n padding-left: 14px;\n padding-bottom: 1.125rem;\n background: map-get($docs-colors, theme);\n}\n","@mixin docs-dark-block($bordered: true) {\n background-color: map-get($docs-colors, docsGray90);\n color: map-get($docs-colors, docsGray30);\n @if $bordered {\n border: 1px solid map-get($docs-colors, docsGray80);\n }\n}\n\n\n// Copied from sassplate\n@mixin breakpoint($bp, $isMaxWidth: false, $isScreenOnly: true) {\n $breakpoint: map-get((\n xs: 0px,\n sm: 768px,\n md: 1024px\n ), $bp);\n $media: if($isMaxWidth, 'max-width', 'min-width');\n\n @if $isMaxWidth {\n $breakpoint: $breakpoint - 1px;\n }\n\n $media-query: \"(#{$media}: #{$breakpoint})\";\n\n @if $isScreenOnly {\n $media-query: \"screen and #{$media-query}\";\n }\n\n @media #{$media-query} {\n @content;\n }\n}\n\n@function strip-units($number) {\n @return $number / ($number * 0 + 1);\n}\n\n@function px-rem($px, $context: 16) {\n @return strip-units($px) / strip-units($context) + 0rem;\n}\n","@import \"node_modules/prismjs/themes/prism\";\n\n$theme-color: #ff4843;\n\n@import \"mixins\";\n@import \"variables\";\n@import \"type\";\n@import \"specsheet\";\n@import \"header\";\n@import \"pages/index\";\n@import \"pages/grid\";\n@import \"pages/colors\";\n@import \"pages/css-utilities\";\n\n\n","\n.docs-page-header {\n position: relative;\n display: block;\n padding: px-rem(32) 0 px-rem(40);\n background-color: map-get($docs-colors, theme);\n margin-bottom: px-rem(48);\n}\n\n.docs-header-link-back {\n display: block;\n margin-bottom: 1rem;\n color: map-get($docs-colors, white);\n text-decoration: none;\n\n .icon {\n fill: white;\n }\n\n &:hover {\n color: map-get($docs-colors, white);\n text-decoration: underline;\n\n .icon {\n transform: translateX(-2px);\n }\n }\n}\n",".docs-index-text-links {\n list-style: none;\n padding: 0;\n margin: 0;\n\n li {\n line-height: 2;\n\n a {\n display: inline-block;\n margin-bottom: 12px;\n }\n }\n\n @include breakpoint(sm) {\n columns: 2;\n column-gap: 16px;\n column-fill: balance;\n }\n}\n","// Grid examples\n.docs-grid-example {\n padding-top: 2rem;\n padding-bottom: 2rem;\n background: map-get($docs-colors, prism-background);\n\n .row:not(:last-child) {\n margin-bottom: px-rem(12);\n }\n}\n\n.docs-grid-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.5rem;\n text-align: center;\n font-family: $monospace;\n font-size: 0.875rem;\n background-color: white;\n border: 1px solid map-get($docs-colors, docsGray80);\n}\n",".docs-color-swatch-wrap {\n margin-bottom: 30px;\n}\n\n.docs-color-swatch {\n margin-bottom: 10px;\n border-radius: 4px;\n}\n\n.docs-color-swatch--dark-bordered {\n box-shadow:inset 0 0 0 1px map-get($docs-colors, docsGray80);\n}\n\n.docs-colors-container {\n padding-top: 1px;\n}\n.docs-color-labels {\n .docs-type-classname.docs-type-classname--blocky {\n font-size: 12px;\n padding: 5px 8px 4px;\n margin-bottom: 6px;\n }\n}\n\n.docs-type-classname--blocky {\n display: inline-block;\n background: white;\n border: solid 1px map-get($docs-colors, gray70);\n border-radius: px-rem(5);\n padding: px-rem(4) px-rem(12);\n margin-bottom: px-rem(10);\n text-align: center;\n}\n","\n\ntable.docs-table {\n font-size: 0.8125rem;\n color: map-get($docs-colors, gray75);\n border: 1px solid map-get($docs-colors, docsGray30);\n border-collapse: collapse;\n width: 100%;\n text-align: center;\n}\n\ntable.docs-table th {\n border-width: 1px;\n padding: 0.5rem;\n border: 1px solid map-get($docs-colors, docsGray70);\n background-color: map-get($docs-colors, docsGray80);\n}\n\ntable.docs-table td {\n border-width: 1px;\n padding: 0.5rem;\n border: 1px solid map-get($docs-colors, docsGray70);\n background-color: map-get($docs-colors, white);\n}\n\n\n.docs-media-object-example,\n.docs-flag-object-example {\n img {\n border: 1px solid map-get($docs-colors, docsGray70);\n }\n}\n"]}
\ No newline at end of file
diff --git a/docs/odo-sassplate/styles.css b/docs/odo-sassplate/styles.css
index f1b0e97..8ba718d 100644
--- a/docs/odo-sassplate/styles.css
+++ b/docs/odo-sassplate/styles.css
@@ -1011,54 +1011,52 @@ code:not([class*="language"])::after {
content: "\00a0";
letter-spacing: -.2em; }
-.type-title-1 {
+.type-display-1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #30373d;
- text-transform: uppercase;
letter-spacing: 0.025em;
margin-top: -0.2em;
font-size: 28px;
line-height: 1.2; }
@media screen and (min-width: 768px) {
- .type-title-1 {
+ .type-display-1 {
font-size: 40px; } }
-.type-title-1--small {
+.type-display-1--small {
font-size: 24px; }
@media screen and (min-width: 768px) {
- .type-title-1--small {
+ .type-display-1--small {
font-size: 32px; } }
-.type-title-1--bold {
+.type-display-1--bold {
font-weight: bold; }
@media screen and (min-width: 768px) {
- .type-title-1--bold {
+ .type-display-1--bold {
font-size: 44px; } }
-.en .type-title-1 {
+.en .type-display-1 {
line-height: 1.5; }
@media screen and (min-width: 1024px) {
- .en .type-title-1 {
+ .en .type-display-1 {
color: mediumseagreen; } }
-.zh .type-title-1 {
+.zh .type-display-1 {
color: slategray; }
-.type-title-2 {
+.type-display-2 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #30373d;
- text-transform: uppercase;
letter-spacing: 0.025em;
margin-top: -0.1em;
font-size: 20px;
line-height: 1; }
@media screen and (min-width: 768px) {
- .type-title-2 {
+ .type-display-2 {
font-size: 28px; } }
@media screen and (min-width: 1024px) {
- .type-title-2 {
+ .type-display-2 {
font-size: 36px; } }
.type-header-1 {
@@ -1230,6 +1228,7 @@ code:not([class*="language"])::after {
padding: 0;
background-color: transparent;
text-decoration: none;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #1b9ec6; }
.text-link:hover {
text-decoration: underline;
@@ -1250,6 +1249,9 @@ code:not([class*="language"])::after {
.text-link--icon-right .icon {
margin-left: 6px; }
+.input {
+ -webkit-appearance: none; }
+
.icon {
position: relative;
display: inline-block;
@@ -1369,16 +1371,16 @@ button svg.icon use {
.spacer-top-none\:first:first-child {
padding-top: 0; }
-.type--blue-dk {
+.type--blue-dark {
color: #005992; }
-.fill--blue-dk {
+.fill--blue-dark {
fill: #005992 !important; }
-.stroke--blue-dk {
+.stroke--blue-dark {
stroke: #005992; }
-.background--blue-dk {
+.background--blue-dark {
background-color: #005992; }
.type--blue {
@@ -1393,16 +1395,16 @@ button svg.icon use {
.background--blue {
background-color: #1b9ec6; }
-.type--purple-dk {
+.type--purple-dark {
color: #711471; }
-.fill--purple-dk {
+.fill--purple-dark {
fill: #711471 !important; }
-.stroke--purple-dk {
+.stroke--purple-dark {
stroke: #711471; }
-.background--purple-dk {
+.background--purple-dark {
background-color: #711471; }
.type--purple {
diff --git a/docs/odo-sassplate/typography.html b/docs/odo-sassplate/typography.html
index b274622..b062764 100644
--- a/docs/odo-sassplate/typography.html
+++ b/docs/odo-sassplate/typography.html
@@ -37,176 +37,145 @@ Typography
-
-
-
-
-
All Breakpoints
-
-
-
-
+
+
+
+
+
All Breakpoints
+
+
font-family: Helvetica Neue
-
-
font-weight: normal
-
-
color: gray30
-
-
- text-transform: uppercase
-
-
letter-spacing: 0.025em
-
-
margin-top: flat
-
-
font-size: 28
-
-
line-height: 1.2
-
-
-
-
sm
+
-
-
+
+ breakpoint:
+ sm
+
+
+
font-size: 40
-
-
-
-
-
Qualifiers
-
-
.en .type-title-1
-
All Breakpoints
-
-
-
-
- line-height: 1.5
-
-
-
-
md
+
-
+
+
+
+
+
+
+
Welcome to Odopod
-
-
color: mediumseagreen
+
-
-
.zh .type-title-1
-
All Breakpoints
-
-
-
-
- color: slategray
+
+
+
+
@@ -221,51 +190,37 @@
-