Resort to using $v-focus-color instead of valo-focus-color() Clean valo-focus-color() function implementation. Remove unnecessary documentation from _variables.scss Increase bevel depth slightly (better contrast) Change-Id: I1272c27fd76cd9a1f1f4c36b76756bc73802eb83tags/7.3.0.beta1
@@ -155,7 +155,7 @@ | |||
@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit, $include-box-shadow: true) { | |||
$focus-color: valo-focus-color(); | |||
$focus-color: $v-focus-color; | |||
@if color-luminance($focus-color) + 50 < color-luminance($background-color) { | |||
border-color: $focus-color; |
@@ -205,7 +205,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb | |||
cursor: pointer; | |||
&:hover { | |||
color: valo-focus-color(); | |||
color: $v-focus-color; | |||
} | |||
} | |||
@@ -219,17 +219,17 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb | |||
cursor: pointer; | |||
&:hover { | |||
color: valo-focus-color(); | |||
color: $v-focus-color; | |||
} | |||
} | |||
.#{$primary-stylename}-month-day-today { | |||
background: blend-normal(rgba(valo-focus-color(), .05), $v-background-color); | |||
background: blend-normal(rgba($v-focus-color, .05), $v-background-color); | |||
.#{$primary-stylename}-day-number { | |||
font-weight: $v-font-weight + 100; | |||
color: valo-focus-color(); | |||
border-top: 2px solid valo-focus-color(); | |||
color: $v-focus-color; | |||
border-top: 2px solid $v-focus-color; | |||
line-height: round($v-unit-size/1.5) - 1px; | |||
margin: 0; | |||
padding: 0 round($v-unit-size/8); | |||
@@ -275,10 +275,6 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb | |||
.#{$primary-stylename}-header-week td { | |||
vertical-align: middle !important; | |||
//&:first-child { | |||
// width: round($v-unit-size*1.5); | |||
//} | |||
} | |||
.#{$primary-stylename}-header-week .#{$primary-stylename}-header-day { | |||
@@ -302,8 +298,6 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb | |||
.#{$primary-stylename}-day-times, | |||
.#{$primary-stylename}-day-times-today { | |||
outline: none; | |||
//@include box-sizing(border-box); | |||
//padding: 0 round($v-unit-size/8); | |||
border-right: 1px solid transparent; | |||
&:focus { | |||
@@ -311,7 +305,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb | |||
} | |||
} | |||
$valo-calendar-time-divider-color: darken($v-background-color, 5%); | |||
$valo-calendar-time-divider-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); | |||
.#{$primary-stylename} .v-datecellslot, | |||
.#{$primary-stylename} .v-datecellslot-even { | |||
@@ -332,14 +326,14 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb | |||
} | |||
.#{$primary-stylename}-current-time { | |||
background: valo-focus-color(); | |||
background: $v-focus-color; | |||
line-height: 1px; | |||
pointer-events: none; | |||
@include opacity(.5); | |||
&:before { | |||
content: "\2022"; | |||
color: valo-focus-color(); | |||
color: $v-focus-color; | |||
font-size: 22px; | |||
margin-left: -0.07em; | |||
} | |||
@@ -472,7 +466,6 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb | |||
// Event is being dragged | |||
&[style*=" left:"] .#{$primary-stylename}-event-content { | |||
//box-shadow: valo-shadow(); | |||
} | |||
} | |||
@@ -486,7 +479,6 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb | |||
border: 1px solid $v-app-background-color; | |||
padding-top: 3px; | |||
margin-right: round($v-unit-size/8); | |||
//margin-left: round($v-unit-size/8); | |||
} | |||
@@ -110,7 +110,7 @@ | |||
border-radius: $v-border-radius; | |||
@include opacity(.3); | |||
$focus-color: valo-focus-color(); | |||
$focus-color: $v-focus-color; | |||
@if is-dark-color($focus-color) { | |||
background: scale-color($focus-color, $lightness: 50%); | |||
} @else { |
@@ -162,7 +162,7 @@ $v-tree-expand-animation-enabled: false !default; | |||
// This a v-tree-node-caption element | |||
&:after { | |||
opacity: 1; | |||
border: 1px solid valo-focus-color(); | |||
border: 1px solid $v-focus-color; | |||
} | |||
.v-ie8 & { | |||
@@ -221,21 +221,21 @@ $v-tree-expand-animation-enabled: false !default; | |||
position: absolute; | |||
height: 2px; | |||
width: 100%; | |||
background: valo-focus-color(); | |||
background: $v-focus-color; | |||
font-size: $v-font-size * 2; | |||
line-height: 2px; | |||
color: valo-focus-color(); | |||
color: $v-focus-color; | |||
text-indent: round($v-font-size/-4); | |||
text-shadow: 0 0 1px $v-background-color, 0 0 1px $v-background-color; | |||
} | |||
.#{$primary-stylename}-node-caption-drag-center { | |||
box-shadow: 0 0 0 2px valo-focus-color(); | |||
box-shadow: 0 0 0 2px $v-focus-color; | |||
position: relative; | |||
border-radius: $v-border-radius; | |||
.v-ie8 & { | |||
outline: 2px solid valo-focus-color(); | |||
outline: 2px solid $v-focus-color; | |||
} | |||
} | |||
@@ -15,9 +15,9 @@ | |||
@mixin valo-spinner ($size: 24px, $thickness: 2px, $color: null, $speed: 500ms) { | |||
$color: $color or valo-focus-color(); | |||
$color: $color or $v-focus-color; | |||
// Make size divisible by 2, so that the rotation won't jiggle | |||
$size: $size + $size%2; | |||
$size: round($size) + round($size) % 2; | |||
height: $size !important; | |||
width: $size !important; | |||
@include box-sizing(border-box); | |||
@@ -60,7 +60,7 @@ | |||
$v-loading-indicator-color: valo-focus-color() !default; | |||
$v-loading-indicator-color: $v-focus-color !default; | |||
$v-loading-indicator-bar-height: ceil($v-unit-size/10) !default; | |||
$v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default; | |||
@@ -6,7 +6,7 @@ | |||
// List of components to include in the theme compilation. The list can be modified to make | |||
// the compiled theme smaller by removing unused components from the list. | |||
// @variable v-included-components | |||
// | |||
// @usage | |||
// // Remove the Calendar component styles from the output | |||
// $v-included-components: remove($v-included-components, calendar); | |||
@@ -54,7 +54,6 @@ $v-included-components: | |||
// Checks if a given component is included in the compilation. Used by the collection mixins that | |||
// include all components, like valo-components and valo-components. | |||
// @mixin v-is-included | |||
// @param $component-name {String} the name of the component to check | |||
// @param $is-included {list} (Optional) the list of components which is checked | |||
// @return {Boolean} true if the component is included in the compilation, false if not | |||
@@ -64,14 +63,10 @@ $v-included-components: | |||
// A static text that is shown while the application JavaScript is loaded and started | |||
// @variable v-app-loading-text | |||
// @default "" | |||
$v-app-loading-text : "" !default; | |||
// Base line height used for all widgets | |||
// @variable v-line-height | |||
// @default 1.55 !default | |||
$v-line-height : 1.55 !default; | |||
@@ -102,21 +97,20 @@ $v-border-radius : 4px | |||
$v-gradient : v-linear 8% !default; | |||
$v-bevel : inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default; | |||
$v-bevel-depth : 25% !default; | |||
$v-bevel-depth : 30% !default; | |||
$v-shadow : 0 2px 3px v-shade !default; | |||
$v-shadow-opacity : 5% !default; | |||
$v-focus-color : null !default; | |||
$v-focus-style : 0 0 0 2px rgba(valo-focus-color(), .5) !default; | |||
$v-focus-color : valo-focus-color() !default; | |||
$v-focus-style : 0 0 0 2px rgba($v-focus-color, .5) !default; | |||
$v-animations-enabled : true !default; | |||
$v-hover-styles-enabled : true !default; | |||
$v-disabled-opacity : 0.5 !default; | |||
$v-selection-color : valo-focus-color() !default; | |||
$v-selection-color : $v-focus-color !default; | |||
$v-default-field-width : $v-unit-size * 5 !default; | |||
@@ -135,7 +129,4 @@ $valo-include-common-stylenames : true | |||
// The Vaadin compiler parses URL paths differently than the regular Sass compiler (i.e. Vaadin modifies relative url paths). | |||
// This boolean is used to flag which compiler is used, so that paths are correct for different resources. | |||
// false == Ruby, true == Vaadin | |||
// @private | |||
// @variable v-relative-paths | |||
// @default false | |||
$v-relative-paths: false !default; |
@@ -74,19 +74,14 @@ $v-luminance-threshold: 150 !default; | |||
@function valo-focus-color ($color: null, $context: null) { | |||
$context: $context or $v-app-background-color; | |||
$fallback: $context; | |||
@if is-dark-color($fallback) { | |||
$fallback: scale-color($fallback, $lightness: 40%, $saturation: 80%); | |||
@function valo-focus-color ($context: $v-app-background-color) { | |||
$color: $context; | |||
@if is-dark-color($context) { | |||
$color: scale-color($color, $lightness: 40%, $saturation: 80%); | |||
} @else { | |||
$fallback: scale-color($fallback, $lightness: -50%, $saturation: 80%); | |||
$color: scale-color($color, $lightness: -50%, $saturation: 80%); | |||
} | |||
$focus-color: $color or $v-focus-color or $fallback; | |||
@return $focus-color; | |||
@return $color; | |||
} | |||