From: Tim Hartwick Date: Mon, 9 Nov 2015 21:42:28 +0000 (-0800) Subject: ink changes X-Git-Tag: v2.0.0-rc.1~86 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=48e1f3fb84f612f145132affbae0fc1b433027e5;p=thirdparty%2Ffoundation%2Ffoundation-emails.git ink changes --- diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 8867cda4..bdf8d840 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -1 +1,6 @@ @import 'foundation'; + +.docs-code-iframe { + width: 100%; + height: 200px; +} \ No newline at end of file diff --git a/docs/pages/button.md b/docs/pages/button.md index 4ab21271..95494a60 100644 --- a/docs/pages/button.md +++ b/docs/pages/button.md @@ -1,23 +1,103 @@ --- title: Button -description: Button! +description: Dynamic and effective calls to actions. sass: ./scss/ink/components/_button.scss --- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic repellendus deserunt, tenetur amet dolorum, fugiat minima quisquam ducimus ad. Numquam magnam possimus quae corporis sint assumenda, sit vel harum repellendus? +To get buttons that look awesome in most clients we make a table with the class .button that wraps your +<a> tag. Buttons expand to the full width of their container by default. You can contain the buttons in sub-grid or block-grid elements. +Check out this basic button: ```inky -
- - - - - - -
- Button! -
- - -
+
+ + + + + + +
+ Button! +
+ + +
+``` + +You can quickly modify the size of our buttons by adding these classes: +```inky +
+ + + + + + +
+ Button! +
+ + + + + + + + +
+ Button! +
+ + + + + + + + +
+ Button! +
+ + +
+``` + +You can also change the color using our color classes here: +```inky +
+ + + + + + +
+ Button! +
+ + + + + + + + +
+ Button! +
+ + + + + + + + +
+ Button! +
+ + +
``` diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html index b1337a2c..737f5ff5 100644 --- a/docs/partials/component-list.html +++ b/docs/partials/component-list.html @@ -1,72 +1,19 @@ \ No newline at end of file +
  • Type
    • +
  • Visibility
    • + \ No newline at end of file diff --git a/lib/buildInkySample.js b/lib/buildInkySample.js index a2e1976c..29954630 100644 --- a/lib/buildInkySample.js +++ b/lib/buildInkySample.js @@ -35,7 +35,13 @@ var IFRAME_TEMPLATE = multiline(function() {/*
    - {0} + + + + +
    + {0} +
    diff --git a/scss/ink/components/_global.scss b/scss/ink/components/_global.scss index 5a5da649..39b0256c 100755 --- a/scss/ink/components/_global.scss +++ b/scss/ink/components/_global.scss @@ -56,6 +56,10 @@ $column-gutter: 20px !default; /// @type Number $container-width: 580px !default; -// We use these to make sure border radius matches unless we want it different. +/// Global raidus of radius-corners. +/// @type Number $global-radius: 3px !default; + +/// Global rounded radius of rounded-corners. +/// @type Number $global-rounded: 500px !default;