From: harry Date: Sun, 12 Feb 2017 07:56:13 +0000 (+0530) Subject: Added bordered class to prototype utility! X-Git-Tag: v6.4.0-rc1~23^2~20^2~66 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6e35a30853770189e40bd6f0cb644e46ed487396;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Added bordered class to prototype utility! Also - Added bordered class to docs and visual regression testing. - Added tables examples to docs and visual regression testing. - Renamed Rounded elements to rounded & bordered --- diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md index 7333d0779..479c05914 100644 --- a/docs/pages/prototyping.md +++ b/docs/pages/prototyping.md @@ -45,18 +45,18 @@ Looking for more customization including **responsive breakpoints?** Click here --- -## Rounded Elements +## Rounded & Bordered -These `.rounded` classes helps to make an element round its corners. This will help you quickly style the borders of an element. Mostly used in buttons, images, cards and more +These `.rounded` & `.bordered` classes helps to make an element round its corners and give light borders respectively. This will help you quickly style the borders of an element. Mostly used in buttons, images, cards, tables and many more #### Buttons ```html_example - - - - - + + + + + ``` #### Images @@ -82,10 +82,10 @@ These `.rounded` classes helps to make an element round its corners. This will h #### Cards ```html -
+
- This is a Middle section + Rounded Card

This is a card.

@@ -97,7 +97,7 @@ These `.rounded` classes helps to make an element round its corners. This will h
-
+
Rounded Card @@ -109,7 +109,7 @@ These `.rounded` classes helps to make an element round its corners. This will h
-
+
Rounded Card @@ -121,7 +121,7 @@ These `.rounded` classes helps to make an element round its corners. This will h
-
+
Rounded Card @@ -135,6 +135,53 @@ These `.rounded` classes helps to make an element round its corners. This will h
+#### Tables + +```html + + +
+``` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table HeaderTable HeaderTable HeaderTable Header
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
+
+ --- ## Font Styling diff --git a/scss/prototype/_bordered.scss b/scss/prototype/_bordered.scss new file mode 100644 index 000000000..665db8a68 --- /dev/null +++ b/scss/prototype/_bordered.scss @@ -0,0 +1,46 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group prototype-bordered +//// + +/// Responsive breakpoints for bordered utility. +/// @type Boolean +$prototype-bordered-breakpoints: $global-prototype-breakpoints !default; + +/// Default value for `prototype-border-width` +/// @type Number +$prototype-border-width: rem-calc(1px) !default; + +/// Default value for `prototype-border-type` +/// @type String +$prototype-border-type: solid !default; + +/// Default value for `prototype-border-color` defaulted to `medium-gray` +/// @type Color +$prototype-border-color: $medium-gray !default; + +@mixin bordered { + border: $prototype-border-width $prototype-border-type $prototype-border-color; +} + +@mixin foundation-prototype-bordered { + .bordered { + @include bordered; + } + + @if ($prototype-bordered-breakpoints) { + // Loop through Responsive Breakpoints + @each $size in $breakpoint-classes { + @include breakpoint($size) { + @if $size != $-zf-zero-breakpoint { + .#{$size}-bordered { + @include bordered; + } + } + } + } + } +} diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss index 23fde7608..732bd0c16 100644 --- a/scss/prototype/_prototype.scss +++ b/scss/prototype/_prototype.scss @@ -27,6 +27,9 @@ // Rounded Utility @import 'rounded'; +// Bordered Utility +@import 'bordered'; + // Overflow helper classes @import 'overflow'; @@ -50,6 +53,7 @@ @include foundation-prototype-font-styling; @include foundation-prototype-list-style-type; @include foundation-prototype-rounded; + @include foundation-prototype-bordered; @include foundation-prototype-overflow; @include foundation-prototype-display; @include foundation-prototype-position; diff --git a/scss/prototype/_rounded.scss b/scss/prototype/_rounded.scss index 73dabc127..a0c8b536e 100644 --- a/scss/prototype/_rounded.scss +++ b/scss/prototype/_rounded.scss @@ -59,7 +59,7 @@ $prototype-border-radius: rem-calc(4px) !default; @include border-left-radius; } .rounded-circle { - @include rounded-circle + @include rounded-circle; } @if ($prototype-rounded-breakpoints) { @@ -83,7 +83,7 @@ $prototype-border-radius: rem-calc(4px) !default; @include border-left-radius; } .#{$size}-rounded-circle { - @include rounded-circle + @include rounded-circle; } } } diff --git a/test/visual/prototype/rounded-bordered.html b/test/visual/prototype/rounded-bordered.html new file mode 100644 index 000000000..f2ac3e0ea --- /dev/null +++ b/test/visual/prototype/rounded-bordered.html @@ -0,0 +1,90 @@ + + + + + + + Foundation for Sites Testing + + + + + +
+

Buttons

+ + + + + +
+
+

Images

+ + + + + + +
+
+

Cards

+
+ +
+ Rounded Card +
+
+

This is a card.

+

It has an easy to override visual style, and is appropriately subdued.

+
+
+
+
+

Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table HeaderTable HeaderTable HeaderTable Header
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
+
+

 

+ + + + + + diff --git a/test/visual/prototype/rounded.html b/test/visual/prototype/rounded.html deleted file mode 100644 index 0a1624d02..000000000 --- a/test/visual/prototype/rounded.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - Foundation for Sites Testing - - - - - -
-

Rounded Buttons

- - - - - -
-
-

Rounded Images

- - - - - - -
-
-

Rounded Cards

-
- -
- Rounded Card -
-
-

This is a card.

-

It has an easy to override visual style, and is appropriately subdued.

-
-
-
- - - - - -