diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/util')
| -rw-r--r-- | WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss | 245 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/util/_color.scss | 52 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/util/_css3.scss | 32 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/util/_gradient.scss | 43 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/util/_lists.scss | 108 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/util/_util.scss | 26 |
6 files changed, 351 insertions, 155 deletions
diff --git a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss index 470799a501..b93307a1b1 100644 --- a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss +++ b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss @@ -1,63 +1,230 @@ -@function valo-bevel ($color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, - $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) { - - @if $bevel-depth == 0% or $bevel-style == none { - @return null; +@function valo-border($border: $v-border, $color: $v-background-color, $context: null, $strength: 1) { + @if type-of($border) != list { + @return $border; + } + + @if $context { + @if color-luminance($color) > color-luminance($context) { + $color: $context; + } } - - $color-stops: valo-gradient-color-stops($color, $gradient-style, $gradient-depth); - $top-color: first(first($color-stops)); - $bottom-color: first(last($color-stops)); + $ret: null; + @each $part in $border { + @if $part == v-tint or $part == v-shade or $part == v-tone { + $part: $part 1; + } + @if type-of($part) == list { + $adjust-type: first-string($part); + $adjust-amount: first-number($part); - $top-color: blend-lighten(adjust-color($top-color, $lightness: $bevel-depth/4, $saturation: -$bevel-depth), scale-color($top-color, $lightness: $bevel-depth/4)); - $bottom-color: blend-darken(rgba(scale-color($bottom-color, $lightness: max(-30%, -$bevel-depth/3), $saturation: -$bevel-depth), $bevel-depth/100%), $bottom-color); - - @return valo-replace-hilite-and-shade($bevel-style, $top-color, $bottom-color); + $tint: blend-screen(white($v-bevel-depth/100%*$adjust-amount*$strength), $color); + $shade: blend-linearburn(black($v-bevel-depth/100%*$adjust-amount*$strength), $color); + + @if $adjust-type == v-tone { + @if is-dark-color($color) { + $color: $tint; + } @else { + $color: $shade; + } + } @else if $adjust-type == v-tint { + $color: $tint; + } @else if $adjust-type == v-shade { + $color: $shade; + } + + $ret: $ret $color; + } @else { + $ret: $ret $part; + } + } + @return $ret; } +@mixin valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient) { + border: valo-border($border, $color); -@function valo-shadow ($shadow-style: null, $shadow-depth: null) { - $shadow-style: $shadow-style or $v-shadow-style; - $shadow-depth: $shadow-depth or $v-shadow-depth; + // Adjust border-colors for gradient + @if $gradient { + $color-stops: valo-gradient-color-stops($color, $gradient); + $top: first(first($color-stops)); + $bottom: first(last($color-stops)); + border-top-color: first-color(valo-border($border, $top)); + border-bottom-color: first-color(valo-border($border, $bottom)); + } +} - @if $shadow-depth == 0% or $shadow-style == none { - @return null; + + + +@function valo-bevel-and-shadow ($bevel: null, $bevel-depth: $v-bevel-depth, $shadow: null, $shadow-opacity: $v-shadow-opacity, $background-color: $v-background-color, $gradient: null, $include-focus: false) { + $box-shadow: null; + + @if $bevel { + @if list-of-lists($bevel) { + @each $b in $bevel { + $this: valo-bevel-and-shadow($bevel: $b, $shadow: null, $background-color: $background-color, $gradient: $gradient); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } @else if $bevel and $bevel != none { + $this: valo-replace-tones($bevel, $background-color, $gradient); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } } - @return valo-replace-hilite-and-shade($shadow-style, rgba(#fff, $shadow-depth/100%), rgba(#000, $shadow-depth/100%)); + @if $shadow { + @if list-of-lists($shadow) { + @each $s in $shadow { + $this: valo-bevel-and-shadow($bevel: null, $shadow: $s, $background-color: null, $gradient: null); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } @else { + $this: valo-replace-shadow($shadow); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } + + @if $include-focus and type-of($v-focus-style) == list { + $box-shadow: $v-focus-style, $box-shadow; + } + + @return $box-shadow; } -@function valo-replace-hilite-and-shade($shadow-list, $hilite, $shade) { - @if $shadow-list == none { +@function valo-replace-tones($list, $tint-color, $gradient: null, $shade-color: null) { + $shade-color: $shade-color or $tint-color; + $ret: (); + + @each $part in $list { + @if $part == v-tint or $part == v-shade or $part == v-tone { + $part: $part 1; + } + @if type-of($part) == list { + $adjust-type: first-string($part); + $adjust-amount: first-number($part); + + $top-color: $tint-color; + $bottom-color: $shade-color; + + @if $gradient { + $color-stops: valo-gradient-color-stops($tint-color, $gradient); + $top-color: first(first($color-stops)); + $bottom-color: first(last($color-stops)); + } + + $tint: blend-lighten(adjust-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount, $saturation: -$v-bevel-depth/2), scale-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount)); + $shade: blend-darken(rgba(scale-color($bottom-color, $lightness: max(-30%, -$v-bevel-depth/3*$adjust-amount), $saturation: -$v-bevel-depth/2), $v-bevel-depth/100%), $bottom-color); + + $color: null; + @if $adjust-type == v-tone { + @if is-dark-color($tint-color) { + $color: $tint; + } @else { + $color: $shade; + } + } @else if $adjust-type == v-tint { + $color: $tint; + } @else if $adjust-type == v-shade { + $color: $shade; + } + + $ret: join($ret, $color); + + } @else { + $ret: join($ret, $part); + } + } + + @return $ret; +} + + +@function valo-replace-shadow ($shadow) { + $ret: (); + @each $part in $shadow { + @if $part == v-tint or $part == v-shade { + $part: $part 1; + } + @if type-of($part) == list { + $adjust-type: first-string($part); + $adjust-amount: first-number($part); + + $tint: rgba(#fff, $v-shadow-opacity/100% * $adjust-amount); + $shade: rgba(#000, $v-shadow-opacity/100% * $adjust-amount); + + $color: null; + @if $adjust-type == v-tint { + $color: $tint; + } @else if $adjust-type == v-shade { + $color: $shade; + } + + $ret: join($ret, $color); + + } @else { + $ret: join($ret, $part); + } + } + @return $ret; +} + + +@function valo-text-shadow($font-color: $v-font-color, $background-color: $v-background-color, $bevel: $v-bevel, $offset: 1px) { + @if type-of($bevel) != list or $v-bevel-depth == 0 { @return null; } - @if type-of(last($shadow-list)) == color { - @return $shadow-list; + $needle: null; + @if color-luminance($font-color) < color-luminance($background-color) { + // Text darker than bg, light shadow. Look for tint + $needle: v-tint; + } @else { + // Text lighter than bg, dark shadow. Look for shade + $needle: v-shade; } - // If the shadow-list only contains one shadow - // (we can't use the recursive replace function because that will mess up the list delimeters) - @if last($shadow-list) == v-hilite { - @return replace($shadow-list, v-hilite, $hilite); - } @else if last($shadow-list) == v-shade { - @return replace($shadow-list, v-shade, $shade); + // Use the first match from the bevel list + @while list-of-lists($bevel) { + $bevel: first($bevel); } - - // If there are multiple shadows in a list, recurse and separate lists with a comma - $new: null; - @each $part in $shadow-list { - @if type-of($part) == list and length($part) > 0 { - $part: valo-replace-hilite-and-shade($part, $hilite, $shade); - @if $part { - $new: $new, $part; - } + + // Remove possible 'inset' + $bevel: remove($bevel, inset); + + $color: $background-color; + @each $b in $bevel { + @if type-of($b) == list { + $strength: first-number($b); + $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength)); } } - @return $new; + @return 0 if($needle==v-tint, $offset, $offset*-1) 0 $color; } diff --git a/WebContent/VAADIN/themes/valo/util/_color.scss b/WebContent/VAADIN/themes/valo/util/_color.scss index 7828e8fd3a..06c182f81b 100644 --- a/WebContent/VAADIN/themes/valo/util/_color.scss +++ b/WebContent/VAADIN/themes/valo/util/_color.scss @@ -1,10 +1,11 @@ +// "Photoshop" blend modes @import "blend-modes"; // Returns the luminance of a color (0-255) // (perceived brightness, rather than absolute mathematical lightness value) // -// "The luminance calculation is a weighted average of the color channels that approximates -// how humans perceive brightness, while lightness is just an average of the largest and +// "The luminance calculation is a weighted average of the color channels that approximates +// how humans perceive brightness, while lightness is just an average of the largest and // smallest channels without regard to perception." // // Source for equation: http://en.wikipedia.org/wiki/Luminance_(relative) @@ -13,19 +14,6 @@ } -@function luminance-diff($color1, $color2) { - @return abs(color-luminance($color1) - color-luminance($color2)); -} - -@function saturation-diff($color1, $color2) { - @return abs(saturation($color1) - saturation($color2)); -} - -@function hue-diff($color1, $color2) { - @return abs(hue($color1) - hue($color2)); -} - - // Arbitrary luminance threshold after which colors should be adjusted either darker or lighter $v-luminance-threshold: 150 !default; @@ -50,8 +38,15 @@ $v-luminance-threshold: 150 !default; } } + +@function darker-of($c1, $c2) { + @if color-luminance($c1) < color-luminance($c2) { + @return $c1; + } + @return $c2; +} + // Returns a text color with enough contrast for the given background color -// @function valo-font-color ($bg-color, $contrast: 0.8) { @if $bg-color { @if is-dark-color($bg-color) { @@ -77,7 +72,7 @@ $v-luminance-threshold: 150 !default; @function valo-focus-color ($color: null, $context: null) { - $context: $context or $v-background-color; + $context: $context or $v-app-background-color; $fallback: $context; @if is-dark-color($fallback) { @@ -87,25 +82,16 @@ $v-luminance-threshold: 150 !default; } $focus-color: $color or $v-focus-color or $fallback; - //@if luminance-diff($context, $focus-color) < 30 or (luminance-diff($context, $focus-color) < 10 and saturation-diff($context, $focus-color) < 20%) { - // $focus-color: #fff; - //} - @return $focus-color; -} - - -@function valo-focus-box-shadow ($color: null, $focus-style: $v-focus-style) { - $focus-color: valo-focus-color($color: $color); - @return replace($focus-style, v-focus-color, transparentize($focus-color, .5)); + @return $focus-color; } -@function valo-selection-color ($color: null, $context: null) { - $selection-color: $color or $v-selection-color or valo-focus-color($color: $color, $context: $context); - //@if luminance-diff($context, $selection-color) < 30 or (luminance-diff($context, $selection-color) < 10 and saturation-diff($context, $selection-color) < 20%) { - // $selection-color: #fff; - //} - @return $selection-color; +@mixin valo-focus-style($include-box-shadow: false) { + @if $include-box-shadow and type-of($v-focus-style) == list { + box-shadow: $v-focus-style; + } @else if type-of($v-focus-style) == color { + border-color: $v-focus-style; + } } diff --git a/WebContent/VAADIN/themes/valo/util/_css3.scss b/WebContent/VAADIN/themes/valo/util/_css3.scss index c04930512c..98f1619eff 100644 --- a/WebContent/VAADIN/themes/valo/util/_css3.scss +++ b/WebContent/VAADIN/themes/valo/util/_css3.scss @@ -1,28 +1,10 @@ -@mixin opacity ($o, $important: false) { - $imp: ""; - - @if $important { - $imp: "!important"; - } - - opacity: $o #{unquote($imp)}; - - @if $o < 1 { - filter: alpha(opacity=$o*100) #{unquote($imp)}; - } @else { - filter: none #{unquote($imp)}; - } -} - +@mixin opacity ($o) { + opacity: $o; -@mixin border-radius ($br) { - -webkit-border-radius: $br; - border-radius: $br; -} - - -@mixin width-breakpoint ($point) { - @media (max-width: $point) { - @content; + $value: first-number($o); + @if $value < 1 { + filter: alpha(opacity=$value*100) remove-nth($o, 1); + } @else { + filter: none remove-nth($o, 1); } } diff --git a/WebContent/VAADIN/themes/valo/util/_gradient.scss b/WebContent/VAADIN/themes/valo/util/_gradient.scss index 5611c33da6..df159ad611 100644 --- a/WebContent/VAADIN/themes/valo/util/_gradient.scss +++ b/WebContent/VAADIN/themes/valo/util/_gradient.scss @@ -1,31 +1,46 @@ -@mixin valo-gradient($color, $style: $v-gradient-style, $depth: $v-gradient-depth, $fallback: null, $direction: to bottom) { +@mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to bottom) { @if $color { - @if $depth <= 0 { - background: $fallback or $color; - } @else { - $color-stops: valo-gradient-color-stops($color, $style, $depth); + @if $gradient { + $color-stops: valo-gradient-color-stops($color, $gradient); @include linear-gradient($direction, $color-stops, $fallback: $fallback or $color); + } @else { + background: $fallback or $color; } } } -@function valo-gradient-color-stops($color, $style: $v-gradient-style, $depth: $v-gradient-depth) { - @if $depth > 0 { - +@function valo-gradient-color-stops($color, $gradient: $v-gradient) { + $style: valo-gradient-style($gradient); + $opacity: valo-gradient-opacity($gradient); + + @if $style != none and $opacity > 0 { @if $style == v-linear or $style == v-linear-reverse { - $start: blend-overlay(transparentize(#fff, 1-$depth/100%), $color); - $end: blend-overlay(transparentize(#000, max(0, 1-$depth/100%)), $color); - $end: blend-multiply(transparentize(#000, max(0, 1-$depth/200%)), $end); - + $start: blend-overlay(rgba(#fff, $opacity/100%), $color); + $end: blend-overlay(rgba(#000, max(0, $opacity/100%)), $color); + $end: blend-multiply(rgba(#000, max(0, $opacity/200%)), $end); + @if $style == v-linear { @return $start 2%, $end 98%; } @else { @return $end 2%, $start 98%; } - } - } @return $color 0%, $color 100%; } + + +@function valo-gradient-style($gradient: $v-gradient) { + @if type-of($gradient) != list { + @return none; + } + @return first-string($gradient); +} + +@function valo-gradient-opacity($gradient: $v-gradient) { + @if type-of($gradient) != list { + @return 0%; + } + @return first-number($gradient); +} diff --git a/WebContent/VAADIN/themes/valo/util/_lists.scss b/WebContent/VAADIN/themes/valo/util/_lists.scss index aad9c2f611..54471b1380 100644 --- a/WebContent/VAADIN/themes/valo/util/_lists.scss +++ b/WebContent/VAADIN/themes/valo/util/_lists.scss @@ -1,4 +1,4 @@ -@function contains ($list, $var, $recursive: false) { +@function contains($list, $var, $recursive: false) { @if $recursive == false { @return (false != index($list, $var)); } @@ -17,6 +17,70 @@ @return false; } + +@function list-of-lists($list) { + @each $part in $list { + @if type-of($part) != list { + @return false; + } + } + @return true; +} + + +@function first-color($list) { + @return first-of-type($list, color); +} + + +@function first-number($list) { + @return first-of-type($list, number); +} + + +@function first-string($list) { + @return first-of-type($list, string); +} + + +@function first-list($list) { + @return first-of-type($list, list); +} + + +@function first-of-type($list, $type) { + @each $item in $list { + @if type-of($item) == $type { + @return $item; + } @else if type-of($item) == list { + $ret: first-of-type($item, $type); + @if $ret { + @return $ret; + } + } + } + @return null; +} + + +@function flatten-list($list) { + $ret: (); + @each $item in $list { + @if type-of($item) != list and $item != null { + $ret: join($ret, $item); + } @else if length($item) > 0 and $item != null { + $t: flatten-list($item); + @if length($t) > 0 { + $ret: join($ret, $t); + } + } + } + @return $ret; +} + + + + // Author: Hugo Giraudel // Repository: https://github.com/Team-Sass/Sass-list-functions // License: MIT @@ -52,7 +116,7 @@ @if type-of($e) == list { $result: $result#{to-string($e, $glue, true)}; } - + @else { $result: if($i != length($list) or $is-nested, $result#{$e}#{$glue}, $result#{$e}); } @@ -69,7 +133,7 @@ @function insert-nth($list, $index, $value) { $result: false; - + @if type-of($index) != number { @warn "$index: #{quote($index)} is not a number for `insert-nth`."; @return $result; @@ -87,7 +151,7 @@ @else { $result: (); - + @for $i from 1 through length($list) { @if $i == $index { $result: append($result, $value); @@ -103,7 +167,7 @@ @function replace-nth($list, $index, $value) { $result: false; - + @if type-of($index) != number { @warn "$index: #{quote($index)} is not a number for `replace-nth`."; @return $result; @@ -113,7 +177,7 @@ @warn "List index 0 must be a non-zero integer for `replace-nth`."; @return $result; } - + @else if abs($index) > length($list) { @warn "List index is #{$index} but list is only #{length($list)} item long for `replace-nth`."; @return $result; @@ -121,19 +185,19 @@ @else { $result: (); - $index: if($index < 0, length($list) + $index + 1, $index); + $index: if($index < 0, length($list) + $index + 1, $index); @for $i from 1 through length($list) { @if $i == $index { $result: append($result, $value); } - + @else { $result: append($result, nth($list, $i)); } } } - + @return $result; } @@ -163,7 +227,7 @@ @function remove-nth($list, $index) { $result: false; - + @if type-of($index) != number { @warn "$index: #{quote($index)} is not a number for `remove-nth`."; @return $result; @@ -181,7 +245,7 @@ @else { $result: (); - $index: if($index < 0, length($list) + $index + 1, $index); + $index: if($index < 0, length($list) + $index + 1, $index); @for $i from 1 through length($list) { @if $i != $index { @@ -189,7 +253,7 @@ } } } - + @return $result; } @@ -213,12 +277,12 @@ @function slice($list, $start: 1, $end: length($list)) { $result: false; - + @if type-of($start) != number or type-of($end) != number { @warn "Either $start or $end are not a number for `slice`."; @return $result; } - + @else if $start > $end { @warn "The start index has to be lesser than or equals to the end index for `slice`."; @return $result; @@ -233,15 +297,15 @@ @warn "List index is #{$start} but list is only #{length($list)} item long for `slice`."; @return $result; } - + @else if $end > length($list) { @warn "List index is #{$end} but list is only #{length($list)} item long for `slice`."; @return $result; } - + @else { $result: (); - + @for $i from $start through $end { $result: append($result, nth($list, $i)); } @@ -249,14 +313,14 @@ @return $result; } - + @function reverse($list, $recursive: false) { $result: (); @for $i from length($list)*-1 through -1 { @if type-of(nth($list, abs($i))) == list and $recursive { - $result: append($result, reverse(nth($list, abs($i)), $recursive)); + $result: append($result, reverse(nth($list, abs($i)), $recursive)); } @else { @@ -270,10 +334,10 @@ @function shift($list, $value: 1) { $result: (); - + @for $i from 0 to length($list) { $result: append($result, nth($list, ($i - $value) % length($list) + 1)); } - + @return $result; -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss index c0626e947f..b8512a4f10 100644 --- a/WebContent/VAADIN/themes/valo/util/_util.scss +++ b/WebContent/VAADIN/themes/valo/util/_util.scss @@ -1,5 +1,5 @@ // Align element vertically inside -@mixin vertical-align-guide ($to-align: (), $align: middle, $pseudo-element: after) { +@mixin valo-vertical-align-guide ($to-align: (), $align: middle, $pseudo-element: after) { &:#{$pseudo-element} { content: ""; display: inline-block; @@ -7,7 +7,7 @@ height: 100%; vertical-align: middle; } - + @if length($to-align) > 0 { @each $selector in $to-align { & > #{unquote($selector)} { @@ -18,28 +18,10 @@ } -// Calculates the (approximated) square root for a given number -@function sqrt($number) { - $guess: rand(); - $root: 4; // Academic guess, a.k.a random number - @for $i from 1 through 10 { - $root: $root - ($root*$root - $number) / (2 * $root); - } - @return $root; -} - - - - -@mixin valo-round { - border-radius: 50%; -} - - - @mixin valo-tappable { @include user-select(none); -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -}
\ No newline at end of file + cursor: pointer; +} |