From: harry Date: Sat, 11 Mar 2017 16:14:04 +0000 (+0530) Subject: Added component styling X-Git-Tag: v6.4.0-rc1~23^2~20^2~23 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=606b73d10736159fd349cdd9e67e7510bd5903c8;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Added component styling Changes - Moved `rounded` and `bordered` to component styling - Created and added `shadow` to component styling --- diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md index 8e2c10598..38d2058db 100644 --- a/docs/pages/prototyping.md +++ b/docs/pages/prototyping.md @@ -61,39 +61,27 @@ Looking for more customization including **responsive breakpoints?** Click here --- -## Rounded & Bordered +## Component Styling -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 +These `.rounded`, `.bordered` & `.shadow` classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more #### Buttons ```html_example - - - - - + + + + + ``` -#### Images - -```html - - -``` - -
- - -
- #### Cards ```html -
+
- Rounded Card + Styled Card

This is a card.

@@ -105,10 +93,10 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
-
+
- Rounded Card + Styled Card

This is a card.

@@ -117,10 +105,10 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
-
+
- Rounded Card + Styled Card

This is a card.

@@ -129,10 +117,10 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
-
+
- Rounded Card + Styled Card

This is a card.

@@ -146,13 +134,13 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner #### Tables ```html - +
```
- +
@@ -190,6 +178,18 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
Table Header
+#### Images + +```html + + +``` + +
+ + +
+ --- ## Font Styling diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss index e05a3fe4e..41615cc09 100644 --- a/scss/prototype/_prototype.scss +++ b/scss/prototype/_prototype.scss @@ -36,6 +36,9 @@ // Bordered Utility @import 'bordered'; +// Shadow Utility +@import 'shadow'; + // Overflow helper classes @import 'overflow'; @@ -63,6 +66,7 @@ @include foundation-prototype-list-style-type; @include foundation-prototype-rounded; @include foundation-prototype-bordered; + @include foundation-prototype-shadow; @include foundation-prototype-overflow; @include foundation-prototype-display; @include foundation-prototype-position; diff --git a/scss/prototype/_shadow.scss b/scss/prototype/_shadow.scss new file mode 100644 index 000000000..9dc45bb83 --- /dev/null +++ b/scss/prototype/_shadow.scss @@ -0,0 +1,42 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group prototype-shadow +//// + +/// Responsive breakpoints for shadow utility. +/// @type Boolean +$prototype-shadow-breakpoints: $global-prototype-breakpoints !default; + +/// Default value for `prototype-box-shadow` +/// @type Number +$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12) !default; + +/// Shadow Utility: Adds a light box shadow to an element by default. +/// @param {Number} $shadow [$prototype-box-shadow] Box Shadow of a component +@mixin shadow( + $shadow: $prototype-box-shadow +) { + box-shadow: $shadow; +} + +@mixin foundation-prototype-shadow { + .shadow { + @include shadow; + } + + @if ($prototype-shadow-breakpoints) { + // Loop through Responsive Breakpoints + @each $size in $breakpoint-classes { + @include breakpoint($size) { + @if $size != $-zf-zero-breakpoint { + .#{$size}-shadow { + @include shadow; + } + } + } + } + } +}