oo-loop 0.5.1 → 0.6.1

package/dist/loop.css

@@ -1,39 +1,3 @@
-/**
- * getMapValue
- * @param $map  map  map of data
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getColors
- * Get value from the map variable $colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getTextColors
- * Get value from the map variable $text-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBgColors
- * Get value from the map variable $bg-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBorderColors
- * Get value from the map variable $border-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getTextSizes
- * Get value from the map variable $text-sizes
- * @param $key  string  key to retrieve the value from
- * @return string
- */
 /**
  * Variables
  * Change at your own will
@@ -72,606 +36,46 @@
  * Text Decoration
  */
 /**
- * Letter Spacing
- */
-/**
- * Font Style
- */
-/**
- * Font Weight
- */
-/**
- * Font Family
- */
-/**
- * List
- */
-/**
- * Container
- */
-/**
- * Columns
- */
-/**
- * Grid
- */
-/**
- * Spacing
- */
-/**
- * Wrapper
- */
-/**
- * Button
- */
-/**
- * Form
- */
-/**
- * Float utilities
- */
-/**
- * Visibility Utilities
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * Empty
- * @param string|list $data
- * @return bool
- */
-/**
- * In List
- * @param $needle    string        the searched value
- * @param $haystack  array|string  the list to search in
- * @return bool
- */
-/**
- * mergeArray
- * @param $array1  list|map list or map
- * @param $array2  list|map list or map being the same type of $array1
- * @return list|map
- */
-/**
- * Is Bright
- * @param color
- * @return bool
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * Empty
- * @param string|list $data
- * @return bool
- */
-/**
- * getMapValue
- * @param $map  map  map of data
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getColors
- * Get value from the map variable $colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getTextColors
- * Get value from the map variable $text-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBgColors
- * Get value from the map variable $bg-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBorderColors
- * Get value from the map variable $border-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getTextSizes
- * Get value from the map variable $text-sizes
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * Replace
- * @param string $search  The value being searched
- * @param string $replace The replacement value
- * @parem string $subject The string being searched and replaced on
- *
- * @return string
- */
-/**
- * Split
- * @param string $pattern The string character to split your string by
- * @param string $subject The input string
- * @param list   $list    The list being populated
- *
- * @return list
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * breakpoints
- * based on material guidelines
- * https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * Empty
- * @param string|list $data
- * @return bool
- */
-/**
- * In List
- * @param $needle    string        the searched value
- * @param $haystack  array|string  the list to search in
- * @return bool
- */
-/**
- * mergeArray
- * @param $array1  list|map list or map
- * @param $array2  list|map list or map being the same type of $array1
- * @return list|map
- */
-/**
- * Is Bright
- * @param color
- * @return bool
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * Empty
- * @param string|list $data
- * @return bool
- */
-/**
- * getMapValue
- * @param $map  map  map of data
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getColors
- * Get value from the map variable $colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getTextColors
- * Get value from the map variable $text-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBgColors
- * Get value from the map variable $bg-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBorderColors
- * Get value from the map variable $border-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getTextSizes
- * Get value from the map variable $text-sizes
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * Replace
- * @param string $search  The value being searched
- * @param string $replace The replacement value
- * @parem string $subject The string being searched and replaced on
- *
- * @return string
- */
-/**
- * Split
- * @param string $pattern The string character to split your string by
- * @param string $subject The input string
- * @param list   $list    The list being populated
- *
- * @return list
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * Clearfix
- */
-/**
- * fontSmoothing
- * @param $smooth bool Apply smoothing ?
- */
-/**
- * Loop
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * Empty
- * @param string|list $data
- * @return bool
- */
-/**
- * In List
- * @param $needle    string        the searched value
- * @param $haystack  array|string  the list to search in
- * @return bool
- */
-/**
- * mergeArray
- * @param $array1  list|map list or map
- * @param $array2  list|map list or map being the same type of $array1
- * @return list|map
- */
-/**
- * Is Bright
- * @param color
- * @return bool
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * Empty
- * @param string|list $data
- * @return bool
- */
-/**
- * getMapValue
- * @param $map  map  map of data
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getColors
- * Get value from the map variable $colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getTextColors
- * Get value from the map variable $text-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBgColors
- * Get value from the map variable $bg-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBorderColors
- * Get value from the map variable $border-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getTextSizes
- * Get value from the map variable $text-sizes
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * Replace
- * @param string $search  The value being searched
- * @param string $replace The replacement value
- * @parem string $subject The string being searched and replaced on
- *
- * @return string
- */
-/**
- * Split
- * @param string $pattern The string character to split your string by
- * @param string $subject The input string
- * @param list   $list    The list being populated
- *
- * @return list
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * breakpoints
- * based on material guidelines
- * https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * Empty
- * @param string|list $data
- * @return bool
- */
-/**
- * In List
- * @param $needle    string        the searched value
- * @param $haystack  array|string  the list to search in
- * @return bool
- */
-/**
- * mergeArray
- * @param $array1  list|map list or map
- * @param $array2  list|map list or map being the same type of $array1
- * @return list|map
- */
-/**
- * Is Bright
- * @param color
- * @return bool
- */
-/**
- * isString
- * @param string|list $data
- * @return bool
- */
-/**
- * isList
- * @param string|list $data
- * @return bool
- */
-/**
- * isMap
- * @param string|list $data
- * @return bool
- */
-/**
- * Empty
- * @param string|list $data
- * @return bool
- */
-/**
- * getMapValue
- * @param $map  map  map of data
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getColors
- * Get value from the map variable $colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getTextColors
- * Get value from the map variable $text-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBgColors
- * Get value from the map variable $bg-colors
- * @param $key  string  key to retrieve the value from
- * @return string
- */
-/**
- * getBorderColors
- * Get value from the map variable $border-colors
- * @param $key  string  key to retrieve the value from
- * @return string
+ * Letter Spacing
  */
 /**
- * getTextSizes
- * Get value from the map variable $text-sizes
- * @param $key  string  key to retrieve the value from
- * @return string
+ * Font Style
  */
 /**
- * Replace
- * @param string $search  The value being searched
- * @param string $replace The replacement value
- * @parem string $subject The string being searched and replaced on
- *
- * @return string
+ * Font Weight
  */
 /**
- * Split
- * @param string $pattern The string character to split your string by
- * @param string $subject The input string
- * @param list   $list    The list being populated
- *
- * @return list
+ * Font Family
  */
 /**
- * isString
- * @param string|list $data
- * @return bool
+ * List
  */
 /**
- * isList
- * @param string|list $data
- * @return bool
+ * Container
  */
 /**
- * isMap
- * @param string|list $data
- * @return bool
+ * Columns
  */
 /**
- * Loop
- *
- * @param $data         list|map    Data to loop through
- * @param $properties   string|list Property name to use
- * @param $prefix       string      String to prepend to the selector
- * @param $is-important ?bool       Set the !important flag ?
- * @param $suffix       ?string     String to append to the selector
+ * Grid
  */
 /**
- * Loop breakpoints
- *
- * @param $breakpoints  list        List of breakpoints classes
- * @param $data         list|map    Data to loop through
- * @param $properties   string|list Property name to use
- * @param $prefix       string      String to prepend to the selector
- * @param $is-important ?bool       Set the !important flag ?
- * @param $suffix       ?string     String to append to the selector
+ * Spacing
  */
 /**
- * Loop map keys
- *
- * @param $keys         list        Keys of the map
- * @param $map          map         Map to search in
- * @param $properties   string|list Property name to use
- * @param $prefix       string      String to prepend to the selector
- * @param $is-important ?bool       Set the !important flag ?
- * @param $suffix       ?string     String to append to the selector
+ * Wrapper
  */
 /**
- * Loop map keys modifiers
- *
- * @param $keys         list        keys of the map
- * @param $map          map         map to search in
- * @param $properties   string|list property name to use
- * @param $is-important ?bool       set the !important flag ?
- * @param $suffix       ?string     string to append to the selector
+ * Button
+ */
+/**
+ * Form
  */
 /**
- * Triangle
+ * Float utilities
  */
 /**
- * Import bases
+ * Visibility Utilities
  */
 /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
 /* Document
@@ -975,6 +379,10 @@ template {
   display: none;
 }
 
+/**
+ * fontSmoothing
+ * @param $smooth bool Apply smoothing ?
+ */
 /**
  * Base
  */
@@ -1000,6 +408,100 @@ body {
   background-color: #fff;
 }
 
+/**
+ * isString
+ * @param string|list $data
+ * @return bool
+ */
+/**
+ * isList
+ * @param string|list $data
+ * @return bool
+ */
+/**
+ * isMap
+ * @param string|list $data
+ * @return bool
+ */
+/**
+ * Empty
+ * @param string|list $data
+ * @return bool
+ */
+/**
+ * In List
+ * @param $needle    string        the searched value
+ * @param $haystack  array|string  the list to search in
+ * @return bool
+ */
+/**
+ * mergeArray
+ * @param $array1  list|map list or map
+ * @param $array2  list|map list or map being the same type of $array1
+ * @return list|map
+ */
+/**
+ * Is Bright
+ * @param color
+ * @return bool
+ */
+/**
+ * getMapValue
+ * @param $map  map  map of data
+ * @param $key  string  key to retrieve the value from
+ * @return string
+ */
+/**
+ * getColors
+ * Get value from the map variable $colors
+ * @param $key  string  key to retrieve the value from
+ * @return string
+ */
+/**
+ * getTextColors
+ * Get value from the map variable $text-colors
+ * @param $key  string  key to retrieve the value from
+ * @return string
+ */
+/**
+ * getBgColors
+ * Get value from the map variable $bg-colors
+ * @param $key  string  key to retrieve the value from
+ * @return string
+ */
+/**
+ * getBorderColors
+ * Get value from the map variable $border-colors
+ * @param $key  string  key to retrieve the value from
+ * @return string
+ */
+/**
+ * getTextSizes
+ * Get value from the map variable $text-sizes
+ * @param $key  string  key to retrieve the value from
+ * @return string
+ */
+/**
+ * Replace
+ * @param string $search  The value being searched
+ * @param string $replace The replacement value
+ * @parem string $subject The string being searched and replaced on
+ *
+ * @return string
+ */
+/**
+ * Split
+ * @param string $pattern The string character to split your string by
+ * @param string $subject The input string
+ * @param list   $list    The list being populated
+ *
+ * @return list
+ */
+/**
+ * breakpoints
+ * based on material guidelines
+ * https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
+ */
 /**
  * Typography
  */
@@ -1116,7 +618,7 @@ a {
   text-decoration: none;
 }
 a:focus, a:hover {
-  color: rgb(49.9587096774, 199.2064516129, 243.8412903226);
+  color: rgb(19.5916508539%, 78.1201771031%, 95.6240354206%);
   text-decoration: none;
 }
 
@@ -1159,9 +661,6 @@ hr, .hr {
   border-bottom: 1px solid #cdcdcd;
 }
 
-/**
- * Grid
- */
 [oo-grid~=layout] {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
@@ -2303,10 +1802,10 @@ hr, .hr {
 }
 [oo-button]:hover, [oo-button]:focus {
   color: #333;
-  background-color: rgb(229.5, 229.5, 229.5);
+  background-color: rgb(90%, 90%, 90%);
 }
 [oo-button]:active {
-  background-color: rgb(224.4, 224.4, 224.4);
+  background-color: rgb(88%, 88%, 88%);
   box-shadow: inset 1px 1px 1px 0 #cccccc;
 }
 [oo-button].full {
@@ -2321,13 +1820,13 @@ hr, .hr {
 }
 [oo-button~=primary]:hover, [oo-button~=primary]:focus {
   color: #fff;
-  border-color: rgb(59.6322580645, 201.8387096774, 244.3677419355);
-  background-color: rgb(59.6322580645, 201.8387096774, 244.3677419355);
+  border-color: rgb(23.385199241%, 79.1524351676%, 95.8304870335%);
+  background-color: rgb(23.385199241%, 79.1524351676%, 95.8304870335%);
 }
 [oo-button~=primary]:active {
-  border-color: rgb(49.9587096774, 199.2064516129, 243.8412903226);
-  background-color: rgb(49.9587096774, 199.2064516129, 243.8412903226);
-  box-shadow: inset 1px 1px 1px 0 rgb(11.7419354839, 168.7903225806, 215.7580645161);
+  border-color: rgb(19.5916508539%, 78.1201771031%, 95.6240354206%);
+  background-color: rgb(19.5916508539%, 78.1201771031%, 95.6240354206%);
+  box-shadow: inset 1px 1px 1px 0 rgb(4.6046805819%, 66.192283365%, 84.6110056926%);
 }
 
 [oo-button~=secondary] {
@@ -2337,13 +1836,13 @@ hr, .hr {
 }
 [oo-button~=secondary]:hover, [oo-button~=secondary]:focus {
   color: #fff;
-  border-color: rgb(23.5214285714, 50.2214285714, 65.4785714286);
-  background-color: rgb(23.5214285714, 50.2214285714, 65.4785714286);
+  border-color: rgb(9.2240896359%, 19.6946778711%, 25.6778711485%);
+  background-color: rgb(9.2240896359%, 19.6946778711%, 25.6778711485%);
 }
 [oo-button~=secondary]:active {
-  border-color: rgb(20.8257142857, 44.4657142857, 57.9742857143);
-  background-color: rgb(20.8257142857, 44.4657142857, 57.9742857143);
-  box-shadow: inset 1px 1px 1px 0 rgb(3.3035714286, 7.0535714286, 9.1964285714);
+  border-color: rgb(8.1669467787%, 17.437535014%, 22.7350140056%);
+  background-color: rgb(8.1669467787%, 17.437535014%, 22.7350140056%);
+  box-shadow: inset 1px 1px 1px 0 rgb(1.2955182073%, 2.7661064426%, 3.606442577%);
 }
 
 [oo-button~=outline] {
@@ -2356,39 +1855,30 @@ hr, .hr {
 }
 [oo-button~=outline][oo-button~=primary]:hover, [oo-button~=outline][oo-button~=primary]:focus {
   color: #fff;
-  border-color: rgb(59.6322580645, 201.8387096774, 244.3677419355);
-  background-color: rgb(59.6322580645, 201.8387096774, 244.3677419355);
+  border-color: rgb(23.385199241%, 79.1524351676%, 95.8304870335%);
+  background-color: rgb(23.385199241%, 79.1524351676%, 95.8304870335%);
 }
 [oo-button~=outline][oo-button~=primary]:active {
   color: #fff;
-  border-color: rgb(49.9587096774, 199.2064516129, 243.8412903226);
-  background-color: rgb(49.9587096774, 199.2064516129, 243.8412903226);
-  box-shadow: inset 1px 1px 1px 0 rgb(11.7419354839, 168.7903225806, 215.7580645161);
+  border-color: rgb(19.5916508539%, 78.1201771031%, 95.6240354206%);
+  background-color: rgb(19.5916508539%, 78.1201771031%, 95.6240354206%);
+  box-shadow: inset 1px 1px 1px 0 rgb(4.6046805819%, 66.192283365%, 84.6110056926%);
 }
 [oo-button~=outline][oo-button~=secondary] {
   border-color: #254F67;
 }
 [oo-button~=outline][oo-button~=secondary]:hover, [oo-button~=outline][oo-button~=secondary]:focus {
   color: #fff;
-  border-color: rgb(23.5214285714, 50.2214285714, 65.4785714286);
-  background-color: rgb(23.5214285714, 50.2214285714, 65.4785714286);
+  border-color: rgb(9.2240896359%, 19.6946778711%, 25.6778711485%);
+  background-color: rgb(9.2240896359%, 19.6946778711%, 25.6778711485%);
 }
 [oo-button~=outline][oo-button~=secondary]:active {
   color: #fff;
-  border-color: rgb(20.8257142857, 44.4657142857, 57.9742857143);
-  background-color: rgb(20.8257142857, 44.4657142857, 57.9742857143);
-  box-shadow: inset 1px 1px 1px 0 rgb(3.3035714286, 7.0535714286, 9.1964285714);
+  border-color: rgb(8.1669467787%, 17.437535014%, 22.7350140056%);
+  background-color: rgb(8.1669467787%, 17.437535014%, 22.7350140056%);
+  box-shadow: inset 1px 1px 1px 0 rgb(1.2955182073%, 2.7661064426%, 3.606442577%);
 }
 
-/**
- * Input
- */
-[oo-form~=toggle]:focus + label::after, [oo-form~=radio]:focus + label::after, [oo-form~=checkbox]:focus + label::after, [oo-form~=select] > select:focus,
-[oo-form~=input]:focus {
-  box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
-}
-
-[oo-form~=select] > select,
 [oo-form~=input] {
   padding: 0.5em 0.625em;
   display: block;
@@ -2408,9 +1898,9 @@ hr, .hr {
   -moz-appearance: none;
   appearance: none;
 }
-[oo-form~=select] > select:focus,
 [oo-form~=input]:focus {
   outline: none;
+  box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
 }
 
 label {
@@ -2472,6 +1962,29 @@ label + [oo-form~=select] {
   border-bottom-color: #4d4d4d;
   border-right-color: #4d4d4d;
 }
+[oo-form~=select] > select {
+  padding: 0.5em 0.625em;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-height: 2.5em;
+  color: #4d4d4d;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-size: 1.6rem;
+  font-style: normal;
+  line-height: 1.15;
+  border: 1px solid #d6d6d6;
+  border-radius: 0.2em;
+  background-color: #fff;
+  box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+[oo-form~=select] > select:focus {
+  outline: none;
+  box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
+}
 [oo-form~=select] > select {
   margin: 0;
   height: 100%;
@@ -2492,6 +2005,47 @@ label + [oo-form~=select] {
   border-color: inherit !important;
 }
 
+/**
+ * Loop properties
+ */
+/**
+ * Loop
+ *
+ * @param $data         list|map    Data to loop through
+ * @param $properties   string|list Property name to use
+ * @param $prefix       string      String to prepend to the selector
+ * @param $is-important ?bool       Set the !important flag ?
+ * @param $suffix       ?string     String to append to the selector
+ */
+/**
+ * Loop breakpoints
+ *
+ * @param $breakpoints  list        List of breakpoints classes
+ * @param $data         list|map    Data to loop through
+ * @param $properties   string|list Property name to use
+ * @param $prefix       string      String to prepend to the selector
+ * @param $is-important ?bool       Set the !important flag ?
+ * @param $suffix       ?string     String to append to the selector
+ */
+/**
+ * Loop map keys
+ *
+ * @param $keys         list        Keys of the map
+ * @param $map          map         Map to search in
+ * @param $properties   string|list Property name to use
+ * @param $prefix       string      String to prepend to the selector
+ * @param $is-important ?bool       Set the !important flag ?
+ * @param $suffix       ?string     String to append to the selector
+ */
+/**
+ * Loop map keys modifiers
+ *
+ * @param $keys         list        keys of the map
+ * @param $map          map         map to search in
+ * @param $properties   string|list property name to use
+ * @param $is-important ?bool       set the !important flag ?
+ * @param $suffix       ?string     string to append to the selector
+ */
 /**
  * Checkbox
  */
@@ -2536,6 +2090,9 @@ label + [oo-form~=select] {
   background-color: #fff;
   border-color: #d6d6d6;
 }
+[oo-form~=checkbox]:focus + label::after {
+  box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
+}
 [oo-form~=checkbox] + label::before {
   left: 0.612rem;
   min-width: 1.44rem;
@@ -2605,6 +2162,9 @@ label + [oo-form~=select] {
   background-color: #fff;
   border-color: #d6d6d6;
 }
+[oo-form~=radio]:focus + label::after {
+  box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
+}
 [oo-form~=radio] + label::after {
   margin-right: 0.6rem;
 }
@@ -2660,6 +2220,9 @@ label + [oo-form~=select] {
   background-color: #4d4d4d;
   border-color: #4d4d4d;
 }
+[oo-form~=toggle]:focus + label::after {
+  box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
+}
 [oo-form~=toggle] + label::before {
   top: calc(50% - 0.84rem);
   min-width: 1.68rem;
@@ -2732,6 +2295,9 @@ label + [oo-form~=select] {
   max-width: none;
 }
 
+/**
+ * Clearfix
+ */
 /**
  * FLoat utilites
  */
@@ -3026,22 +2592,22 @@ ol.list-center {
  * Text alignements
  */
 .text-left {
-  text-align: left;
+  text-align: "left";
 }
 
 .text-right {
-  text-align: right;
+  text-align: "right";
 }
 
 .text-center {
-  text-align: center;
+  text-align: "center";
 }
 
 /**
  * Text Transform
  */
 .text-uppercase {
-  text-transform: uppercase;
+  text-transform: "uppercase";
 }
 
 /**
@@ -3062,7 +2628,7 @@ ol.list-center {
  * Font Style
  */
 .font-italic {
-  font-style: italic;
+  font-style: "italic";
 }
 
 /**
@@ -3080,11 +2646,11 @@ ol.list-center {
  * Font Family
  */
 .font-primary {
-  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 }
 
 .font-secondary {
-  font-family: Georgia, times, serif;
+  font-family: "Georgia", times, serif;
 }
 
 /**