oulu 0.9.11 → 0.10.1

data/app/assets/stylesheets/settings/functions/_animation.sass

@@ -1,12 +1,12 @@
 @function time($value)
-  @if unit_number($value) and unit($value) == 's'
+  @if unit_number($value) and unit($value) == s
     @return true
   @else
     @return null
 
 @function timing_function($value)
   @if string($value)
-    @if $value == 'ease' or $value == 'linear' or $value == 'ease-in' or $value == 'ease-out' or $value == 'ease-in-out' or str-slice($value, 1, 12) == 'cubic-bezier'
+    @if $value == 'ease' or $value == 'linear' or $value == 'ease-in' or $value == 'ease-out' or $value == 'ease-in-out' or str-index($value, cubic-bezier)
       @return true
     @else
       @return null
@@ -14,8 +14,8 @@
     @return null
 
 @function delay($value)
-  @if string($value) and str-slice($value, 1, 1) == '/' and str-slice($value, -1, -1) == 's'
-    @return str-slice($value, 2)
+  @if list($value) and nth($value, 1) == delay
+    @return true
   @else
     @return null
 

data/app/assets/stylesheets/settings/functions/_background.sass

@@ -5,33 +5,22 @@
     @return null
 
 @function background_position($value)
-  @if list($value)
-    @if str-slice(nth($value, 1), 1, 1) != '/'
-      @if position(nth($value, 1)) or position(nth($value, 2))
-        @return true
-      @else if number(nth($value, 1)) or number(nth($value, 2))
-        @return true
-      @else
-        @return null
-    @else
-      @return null
+  @if list($value) and nth($value, 1) != size
+    @return true
   @else
     @return null
 
 @function background_size($value)
   @if string($value)
     @if $value == 'auto' or $value == 'contain' or $value == 'cover'
-      @return true
-    @else if str-slice($value, 2) == 'auto' or $value == 'contain' or $value == 'cover'
-      @return $value
+      @return unquote('/') $value
     @else
       @return null
   @else if list($value)
-    @if str-slice(nth($value, 1), 1, 1) == '/'
-      @if number(nth($value, 1)) or number(nth($value, 2))
-        @return true
-      @else
-        @return null
+    @if nth($value, 1) == size
+      @return unquote('/') nth($value, 2) nth($value, 3)
+    @else
+      @return null
   @else
     @return null
 
@@ -52,3 +41,21 @@
     @return true
   @else
     @return null
+
+@function background_gradient($value)
+  @if string($value)
+    @if str-index($value, linear-gradient) or str-index($value, radial-gradient) or str-index($value, repeating-)
+      @return true
+    @else
+      @return null
+  @else
+    @return null
+
+@function background_clip($value)
+  @if string($value)
+    @if $value == 'border' or $value == 'padding' or $value == 'content' or $value == 'text'
+      @return true
+    @else
+      @return null
+  @else
+    @return null

data/app/assets/stylesheets/settings/functions/_color.sass

@@ -1,3 +1,5 @@
+$luma-threshold: 13 !default
+
 @function color($value)
   @if type-of($value) == color
     @return true
@@ -22,6 +24,15 @@
   @else
     @return null
 
+// tint & shade
+// http://bourbon.io/docs/#tint-shade
+
+@function tint($color, $percent)
+  @return mix(white, $color, $percent)
+
+@function shade($color, $percent)
+  @return mix(black, $color, $percent)
+
 // Adapted from: https://gist.github.com/voxpelli/6304812
 @function luma($color)
   $rgba: red($color), green($color), blue($color)
@@ -64,7 +75,7 @@
     @return null
 
 @function luma_contrast_color($color)
-  @if luma_which($color) == bright
+  @if luma_bright($color)
     @return $luma-contrast-bright-color
   @else
     @return $luma-contrast-dark-color

data/app/assets/stylesheets/settings/functions/_timing.sass

@@ -0,0 +1,28 @@
+// http://bourbon.io/docs/#timing-functions
+
+$ease-in-quad: cubic-bezier(0.550,  0.085, 0.680, 0.530)
+$ease-in-cubic: cubic-bezier(0.550,  0.055, 0.675, 0.190)
+$ease-in-quart: cubic-bezier(0.895,  0.030, 0.685, 0.220)
+$ease-in-quint: cubic-bezier(0.755,  0.050, 0.855, 0.060)
+$ease-in-sine: cubic-bezier(0.470,  0.000, 0.745, 0.715)
+$ease-in-expo: cubic-bezier(0.950,  0.050, 0.795, 0.035)
+$ease-in-circ: cubic-bezier(0.600,  0.040, 0.980, 0.335)
+$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045)
+
+$ease-out-quad: cubic-bezier(0.250,  0.460, 0.450, 0.940)
+$ease-out-cubic: cubic-bezier(0.215,  0.610, 0.355, 1.000)
+$ease-out-quart: cubic-bezier(0.165,  0.840, 0.440, 1.000)
+$ease-out-quint: cubic-bezier(0.230,  1.000, 0.320, 1.000)
+$ease-out-sine: cubic-bezier(0.390,  0.575, 0.565, 1.000)
+$ease-out-expo: cubic-bezier(0.190,  1.000, 0.220, 1.000)
+$ease-out-circ: cubic-bezier(0.075,  0.820, 0.165, 1.000)
+$ease-out-back: cubic-bezier(0.175,  0.885, 0.320, 1.275)
+
+$ease-in-out-quad: cubic-bezier(0.455,  0.030, 0.515, 0.955)
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000)
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000)
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000)
+$ease-in-out-sine: cubic-bezier(0.445,  0.050, 0.550, 0.950)
+$ease-in-out-expo: cubic-bezier(1.000,  0.000, 0.000, 1.000)
+$ease-in-out-circ: cubic-bezier(0.785,  0.135, 0.150, 0.860)
+$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550)

data/app/assets/stylesheets/settings/initializers/_reboot.sass

@@ -1,6 +1,10 @@
 html
   -webkit-tap-highlight-color: rgba(0,0,0,0)
 
+input[type="text"],
+input[type="password"],
+textarea,
+select,
 [tabindex="-1"]:focus
   outline: none !important
 
@@ -26,3 +30,7 @@ input[type="search"]
 
 [hidden]
   display: none !important
+
+ul,
+ol
+  list-style: none

data/app/assets/stylesheets/settings/initializers/_sanitize.sass

@@ -1,114 +1,218 @@
+/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */
+
+// Latest tested: Android 6, Chrome 48, Edge 13, Firefox 44, Internet Explorer 11, iOS 9, Opera 35, Safari 9, Windows Phone 8.1
+
 /*
  * Normalization
+ */
+
+abbr[title]
+	text-decoration: underline // Chrome 48+, Edge 12+, Internet Explorer 11-, Safari 9+
+	text-decoration: underline dotted // Firefox 40+
 
 audio:not([controls])
-  display: none // Chrome 44-, iOS 8+, Safari 9+
+	display: none // Chrome 44-, iOS 8+, Safari 9+
+
+b,
+strong
+	font-weight: bolder // Edge 12+, Safari 6.2+, and Chrome 18+
 
 button
-  overflow: visible // Internet Explorer 11-
-  -webkit-appearance: button // iOS 8+
+	-webkit-appearance: button // iOS 8+
+	overflow: visible // Internet Explorer 11-
+
+button,
+input
+	&::-moz-focus-inner
+		border: 0 // Firefox 4+
+		padding: 0 // Firefox 4+
+
+	&:-moz-focusring
+		outline: 1px dotted ButtonText // Firefox 4+
+
+button,
+select
+	text-transform: none // Firefox 40+, Internet Explorer 11-
 
 details
-  display: block // Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+
+	display: block // Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+
+
+hr
+	overflow: visible // Internet Explorer 11-, Edge 12+
 
 html
-  -ms-overflow-style: -ms-autohiding-scrollbar // Edge 12+, Internet Explorer 11-
-  overflow-y: scroll // All browsers without overlaying scrollbars
-  -webkit-text-size-adjust: 100% // iOS 8+
+	-ms-overflow-style: -ms-autohiding-scrollbar // Edge 12+, Internet Explorer 11-
+	overflow-y: scroll // All browsers without overlaying scrollbars
+	-webkit-text-size-adjust: 100% // iOS 8+, Windows Phone 8.1+
 
 input
-  -webkit-border-radius: 0 // iOS 8+
+	-webkit-border-radius: 0 // iOS 8+
 
-  &[type="button"], &[type="reset"], &[type="submit"]
-    -webkit-appearance: button // iOS 8+
+	&[type="button"],
+	&[type="reset"],
+	&[type="submit"]
+		-webkit-appearance: button // iOS 8+
 
-  &[type="number"]
-    width: auto // Firefox 36+
+	&[type="number"]
+		width: auto // Firefox 36+
 
-  &[type="search"]
-    -webkit-appearance: textfield // Chrome 45+, Safari 9+
+	&[type="search"]
+		-webkit-appearance: textfield // Chrome 45+, Safari 9+
 
-    &::-webkit-search-cancel-button,
-    &::-webkit-search-decoration
-      -webkit-appearance: none // Chrome 45+, Safari 9+
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-decoration
+			-webkit-appearance: none // Chrome 45+, Safari 9+
 
 main
-  display: block // Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+
+	display: block // Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+
 
 pre
-  overflow: auto // Internet Explorer 11-
+	overflow: auto // Internet Explorer 11-
 
 progress
-  display: inline-block // Internet Explorer 11-, Windows Phone 8.1+
-
-small
-  font-size: $small-font-size // All browsers
+	display: inline-block // Internet Explorer 11-, Windows Phone 8.1+
 
 summary
-  display: block // Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+
+	display: block // Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+
 
 svg:not(:root)
-  overflow: hidden // Internet Explorer 11-
+	overflow: hidden // Internet Explorer 11-
 
 template
-  display: none // Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+
+	display: none // Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+
 
 textarea
-  overflow: auto // Edge 12+, Internet Explorer 11-
+	overflow: auto // Edge 12+, Internet Explorer 11-
 
 [hidden]
-  display: none // Internet Explorer 10-
+	display: none // Internet Explorer 10-
 
 /*
  * Universal inheritance
+ */
 
 *,
 ::before,
 ::after
-  box-sizing: inherit
+	box-sizing: inherit
 
 *
-  font-size: inherit
-  line-height: inherit
+	font-size: inherit
+	line-height: inherit
 
 ::before,
 ::after
-  text-decoration: inherit
-  vertical-align: inherit
+	text-decoration: inherit
+	vertical-align: inherit
+
+button,
+input,
+select,
+textarea
+	font-family: inherit
+	font-style: inherit
+	font-weight: inherit
+
+
 
 /*
  * Opinionated defaults
+ */
+
+// specify the margin and padding of all elements
+
+*
+	margin: 0
+	padding: 0
 
 // specify the border style and width of all elements
 
 *,
 ::before,
 ::after
-  border-style: solid
-  border-width: 0
+	border-style: solid
+	border-width: 0
+
+// remove the tapping delay from clickable elements
+
+a,
+area,
+button,
+input,
+label,
+select,
+textarea,
+[tabindex]
+	touch-action: manipulation
+
+// specify the standard appearance of selects
+
+select
+	-moz-appearance: none    // Firefox 40+
+	-webkit-appearance: none // Chrome 45+
+
+	&::-ms-expand
+		display: none        // Edge 12+, Internet Explorer 11-
+
+	&::-ms-value
+		color: currentColor  // Edge 12+, Internet Explorer 11-
+
+// use current current as the default fill of svg elements
+
+svg
+	fill: currentColor
+
+// specify the progress cursor of updating elements
+
+[aria-busy="true"]
+	cursor: progress
+
+// specify the pointer cursor of trigger elements
+
+[aria-controls]
+	cursor: pointer
+
+// specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements
+
+[aria-disabled]
+	cursor: default
+
+// specify the style of visually hidden yet accessible elements
+
+[hidden][aria-hidden="false"]
+	clip: rect(0 0 0 0)
+	display: inherit
+	position: absolute
+
+	&:focus
+		clip: auto
+
+
+
+/*
+ * Configurable defaults
+ */
 
 // specify the core styles of all elements
 
 *
-  background-repeat: $background-repeat
-  margin: 0
-  padding: 0
+	background-repeat: if(variable-exists(background-repeat), $background-repeat, no-repeat)
 
 // specify the root styles of the document
 
 $colon: '\:'
+$slash: '/'
 #{$colon}root
-  background-color: $root-background-color
-  box-sizing: $root-box-sizing
-  color: $root-color
-  cursor: $root-cursor
-  font: #{$root-font-size}/#{$root-line-height} $root-font-family
-  text-rendering: $root-text-rendering
+	background-color: if(variable-exists(root-background-color), $root-background-color, #ffffff)
+	box-sizing: if(variable-exists(root-box-sizing), $root-box-sizing, border-box)
+	color: if(variable-exists(root-color), $root-color, #000000)
+	cursor: if(variable-exists(root-cursor), $root-cursor, default)
+	font: if(variable-exists(root-font-size), $root-font-size, 100%)#{$slash}#{if(variable-exists(root-line-height), $root-line-height, 1.5)} if(variable-exists(root-font-family), $root-font-family, sans-serif)
 
 // specify the text decoration of anchors
 
 a
-  text-decoration: $anchor-text-decoration
+	text-decoration: if(variable-exists(anchor-text-decoration), $anchor-text-decoration, none)
 
 // specify the alignment of media elements
 
@@ -118,7 +222,7 @@ iframe,
 img,
 svg,
 video
-  vertical-align: $media-element-vertical-align
+	vertical-align: if(variable-exists(media-element-vertical-align), $media-element-vertical-align, middle)
 
 // specify the background color of form elements
 
@@ -126,18 +230,8 @@ button,
 input,
 select,
 textarea
-  background-color: $form-element-background-color
-
-// specify the inherited color and font of form elements
-
-button,
-input,
-select,
-textarea
-  color: inherit
-  font-family: inherit
-  font-style: inherit
-  font-weight: inherit
+	background-color: if(variable-exists(form-element-background-color), $form-element-background-color, transparent)
+	color: if(variable-exists(form-element-color), $form-element-color, inherit)
 
 // specify the minimum height of form elements
 
@@ -160,7 +254,7 @@ button,
 [type="week"],
 select,
 textarea
-  min-height: $form-element-min-height
+	min-height: if(variable-exists(form-element-min-height), $form-element-min-height, 1.5em)
 
 // specify the font family of code elements
 
@@ -168,70 +262,38 @@ code,
 kbd,
 pre,
 samp
-  font-family: $monospace-font-family, monospace
+	font-family: if(variable-exists(monospace-font-family), $monospace-font-family, monospace), monospace
 
 // specify the list style of nav lists
 
 nav ol,
 nav ul
-  list-style: $nav-list-style
+	list-style: if(variable-exists(nav-list-style), $nav-list-style, none)
 
-// specify the standard appearance of selects
+// specify the font size of small elements
 
-select
-  -moz-appearance: none // Firefox 40+
-  -webkit-appearance: none // Chrome 45+
-
-  &::-ms-expand
-    display: none // Edge 12+, Internet Explorer 11-
-
-  &::-ms-value
-    color: currentColor // Edge 12+, Internet Explorer 11-
+small
+	font-size: if(variable-exists(small-font-size), $small-font-size, 75%)
 
 // specify the border styling of tables
 
 table
-  border-collapse: $table-border-collapse
-  border-spacing: $table-border-spacing
+	border-collapse: if(variable-exists(table-border-collapse), $table-border-collapse, collapse)
+	border-spacing: if(variable-exists(table-border-spacing), $table-border-spacing, 0)
 
 // specify the resizability of textareas
 
 textarea
-  resize: $textarea-resize
+	resize: if(variable-exists(textarea-resize), $textarea-resize, vertical)
 
-// specify the background color, font color and drop shadow of text selections
+// specify the background color, font color, and drop shadow of text selections
 
 ::-moz-selection
-  background-color: $selection-background-color // required when declaring ::selection
-  color: $selection-color
-  text-shadow: $selection-text-shadow
+	background-color: if(variable-exists(selection-background-color), $selection-background-color, #b3d4fc) // required when declaring ::selection
+	color: if(variable-exists(selection-color), $selection-color, #ffffff)
+	text-shadow: if(variable-exists(selection-text-shadow), $selection-text-shadow, none)
 
 ::selection
-  background-color: $selection-background-color // required when declaring ::selection
-  color: $selection-color
-  text-shadow: $selection-text-shadow
-
-// specify the progress cursor of updating elements
-
-[aria-busy="true"]
-  cursor: progress
-
-// specify the pointer cursor of trigger elements
-
-[aria-controls]
-  cursor: pointer
-
-// specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements
-
-[aria-disabled]
-  cursor: default
-
-// specify the style of visually hidden yet accessible elements
-
-[hidden][aria-hidden="false"]
-  clip: rect(0 0 0 0)
-  display: inherit
-  position: absolute
-
-  &:focus
-    clip: auto
+	background-color: if(variable-exists(selection-background-color), $selection-background-color, #b3d4fc) // required when declaring ::selection
+	color: if(variable-exists(selection-color), $selection-color, #ffffff)
+	text-shadow: if(variable-exists(selection-text-shadow), $selection-text-shadow, none)

data/app/assets/stylesheets/settings/mixins/_animation.sass

@@ -1,28 +1,32 @@
-=animations($value1: null, $value2: null, $value3: null, $value4: null, $value5: null, $value6: null, $value7: null, $value8: null, $value9: null, $value10: null)
-  $list: $value1 $value2 $value3 $value4 $value5 $value6 $value7 $value8 $value9 $value10
-  $animation-names: ()
-  $animation-durations: ()
-  $animation-timing-functions: ()
-  $animation-delays: ()
-  $animation-iteration-counts: ()
-  $animation-directions: ()
-  $animation-fill-modes: ()
-  $animation-play-states: ()
-  @each $value in $list
-    @for $i from 1 through length($value)
-      $animation-names: append($animation-names, if(animation_name(nth($value, $i)), nth($value, $i), null), comma)
-      $animation-durations: append($animation-durations, if(animation_duration(nth($value, $i)), nth($value, $i), null), comma)
-      $animation-timing-functions: append($animation-timing-functions, if(animation_timing_function(nth($value, $i)), nth($value, $i), null), comma)
-      $animation-delays: append($animation-delays, if(animation_delay(nth($value, $i)), animation_delay(nth($value, $i)), null), comma)
-      $animation-iteration-counts: append($animation-iteration-counts, if(animation_iteration_count(nth($value, $i)), nth($value, $i), null), comma)
-      $animation-directions: append($animation-directions, if(animation_direction(nth($value, $i)), nth($value, $i), null), comma)
-      $animation-fill-modes: append($animation-fill-modes, if(animation_fill_mode(nth($value, $i)), nth($value, $i), null), comma)
-      $animation-play-states: append($animation-play-states, if(animation_play_state(nth($value, $i)), nth($value, $i), null), comma)
-  +animation-name($animation-names)
-  +animation_duration($animation-durations)
-  +animation_timing_function($animation-timing-functions)
-  +animation-delay($animation-delays)
-  +animation-iteration-count($animation-iteration-counts)
-  +animation-direction($animation-directions)
-  +animation-fill-mode($animation-fill-modes)
-  +animation-play-state($animation-play-states)
+=animation($values...)
+  $animation-values: ()
+  @each $value in $values
+    $animation-value: ()
+    $animation-name: ()
+    $animation-duration: ()
+    $animation-timing-function: ()
+    $animation-delay: ()
+    $animation-iteration-count: ()
+    $animation-direction: ()
+    $animation-fill-mode: ()
+    $animation-play-state: ()
+    @each $property in $value
+      @if animation_name($property)
+        $animation-name: $property
+      @else if animation_duration($property)
+        $animation-duration: $property
+      @else if animation_timing_function($property)
+        $animation-timing-function: $property
+      @else if animation_delay($property)
+        $animation-delay: nth($property, 2)
+      @else if animation_iteration_count($property)
+        $animation-iteration-count: $property
+      @else if animation_direction($property)
+        $animation-direction: $property
+      @else if animation_fill_mode($property)
+        $animation-fill-mode: $property
+      @else if animation_play_state($property)
+        $animation-play-state: $property
+      $animation-value: $animation-name $animation-duration $animation-delay $animation-iteration-count $animation-timing-function $animation-direction $animation-fill-mode $animation-play-state
+    $animation-values: append($animation-values, $animation-value, comma)
+  animation: $animation-values