From a33cf7fe02cef07483b7f896da01b8f7522259ee Mon Sep 17 00:00:00 2001 From: Paul C Pederson Date: Fri, 11 Jan 2019 13:53:12 -0800 Subject: [PATCH] document new border/position utility mixins --- .../documentation/sass/_utility-mixins.md | 57 +++++++++++++------ 1 file changed, 41 insertions(+), 16 deletions(-) diff --git a/docs/source/documentation/sass/_utility-mixins.md b/docs/source/documentation/sass/_utility-mixins.md index f8a7d76fc..a755667a7 100644 --- a/docs/source/documentation/sass/_utility-mixins.md +++ b/docs/source/documentation/sass/_utility-mixins.md @@ -24,12 +24,14 @@ If the mixin accepts arguments, pass them into the parenthesis: | --------------------------------------------- | ------------------------------ | | [`appearance`](#appearance) | `$value` | | [`animation`](#animation) | `$animations...` | +| [`border-*`](#border) | `$style` | | [`box-sizing`](#box-sizing) | `$box` | | [`box-shadow`](#box-shadow) | `$shadow` | | [`calc`](#calc) | `$property, $value` | | [`clearfix`](#clearfix) | none | | [`keyframes`](#keyframes) | `$name` | -| [`placeholder`](#placeholder) |`$property`, `$attr` | +| [`placeholder`](#placeholder) | `$property`, `$attr` | +| [`position-*`](#position) | `$value` | | [`prefixer`](#prefixer) | `$property, $value, $prefixes` | | [`respond-to`](#respond-to) | `$max, $mi, $type` | | [`transform`](#transform) | `$property` | @@ -45,7 +47,7 @@ If the mixin accepts arguments, pass them into the parenthesis: | [`invisible`](#visibility) | none | | [`hide`](#visibility) | none | -#### Animation +

Animation

The animation mixin allows you to declare cross-browser animations. The mixin accepts @@ -66,7 +68,7 @@ box:hover { } ``` -#### Appearance +

Appearance

The `appearance` CSS property is used to display an element using a platform-native styling based on the operating system's theme. For example, to remove browser specific styling for a ui element, use: @@ -74,7 +76,21 @@ The `appearance` CSS property is used to display an element using a platform-nat @include appearance(none); ``` -#### Box-Sizing +

Border

+ +For adding borders that flip in right to left languages, use the `border-` mixins: + +```scss +// set all in one argument +@include border-right(1px solid $blue); +@include border-left(none); + +// set just the color +@include border-color-right($blue); +@include border-color-left($off-white); +``` + +

Box-Sizing

Set the `box-sizing` property for all browsers (with browser prefixes): @@ -84,7 +100,7 @@ Set the `box-sizing` property for all browsers (with browser prefixes): Valid values are `content-box`, `border-box`, and `inherit`. -#### Box-Shadow +

Box-Shadow

Set the `box-shadow` property for all browsers (with browser prefixes): @@ -92,7 +108,7 @@ Set the `box-shadow` property for all browsers (with browser prefixes): @include box-shadow(border-box); ``` -#### Calc +

Calc

Shorthand for setting a property to use a `calc` value. Pass the property you'd like to set, then the value you'd like to use: @@ -100,7 +116,7 @@ Shorthand for setting a property to use a `calc` value. Pass the property you'd @include calc(width, '100px - 10%'); ``` -#### Clearfix +

Clearfix

Applies the framework-standard clear for floated elements: @@ -108,7 +124,7 @@ Applies the framework-standard clear for floated elements: @include clearfix(); ``` -#### Keyframes +

Keyframes

For creating animations, you can use the `keyframes` mixin. This mixin accepts an animation name. Then inside the mixin, write your animation as a content block: @@ -128,15 +144,24 @@ Now you can use the [animation mixin](#animation) as a named animation like this ``` -#### Placeholder +

Placeholder

Wraps the wide array of input placeholder selectors across browsers. -``` +```scss @include placeholder('color', $dark-blue); ``` -#### Prefixer +

Position

+ +Set `right` and `left` properties (automatically flips in right-to-left languages). + +```scss +@include position-right(4px); +@include position-left(0); +``` + +

Prefixer

This is one of the most flexible mixins in the library. Use it to add browser prefixes to a property: @@ -146,7 +171,7 @@ This is one of the most flexible mixins in the library. Use it to add browser pr In this way you can prefix any property. Adding the `spec` as the last argument will also output the property *without* a prefix. -#### Respond To +

Respond To

The `respond-to` mixin adds media queries for use in responsive design. The mixin accepts three arguments: maximum size, minimum size, and type (screen, print, etc). You can pass just the first out of convenience. This mixin works well with the [breakpoint variables](../sass#breakpoints): @@ -176,7 +201,7 @@ You can assemble more complicated media queries by using both min and max: This will add styles that only appear *between* the `$medium` and `$large` screen sizes. -#### Transform +

Transform

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set. `transform`, `transform-origin`, and `transform-style` all add the necessary browser prefixes for interacting with their respective transform properties. @@ -187,7 +212,7 @@ The CSS transform property lets you modify the coordinate space of the CSS visua @include transform-style(preserve-3d); ``` -#### Transition +

Transition

This mixin provides a shorthand syntax and supports multiple transitions. @@ -205,7 +230,7 @@ Or you can use the individual transition properties: @include transition-delay(0.5s); ``` -#### Transition Prefixed +

Transition Prefixed

To transition vendor-prefixed properties, e.g. `-webkit-transform` and `-moz-transform`, there is an additional convinience `transition-prefixed()` mixin: @@ -215,7 +240,7 @@ To transition vendor-prefixed properties, e.g. `-webkit-transform` and `-moz-tra This will generate vendor prefixed properties *and* values. -#### Visibility +

Visibility

The visibility mixins change the `visibility` property. This is useful for removing and adding elements at certain breakpoints or with certain class names. No arguments are passed. Invisible sets `visibility: hidden` on the object, leaving in the in document flow, but removing it from view. `hide()` will completely remove the item with `display:none`.