-@mixin valo-button-borderless-style {
+@mixin valo-button-borderless-style ($font-color: inherit) {
border: none;
box-shadow: none;
background: transparent;
- color: inherit;
+ color: $font-color;
+
+ &:hover {
+ &:after {
+ background: transparent;
+ }
+
+ @if type-of($font-color) == color {
+ color: lighten($font-color, 10%);
+ }
+ }
+
+ &:active {
+ &:after {
+ background: transparent;
+ }
+
+ @if type-of($font-color) == color {
+ color: inherit;
+ }
+ }
+}
+
+
+@mixin valo-button-quiet-style ($primary-stylename: v-button) {
+ visibility: hidden;
+
+ &:focus,
+ &:hover {
+ visibility: visible;
+ }
+
+ .#{$primary-stylename}-wrap {
+ visibility: visible;
+ }
}
}
}
}
+
+
+@mixin valo-button-icon-align-top-style ($primary-stylename: v-button) {
+ height: auto;
+ padding-top: ceil($v-unit-size/9);
+ padding-bottom: ceil($v-unit-size/9);
+
+ .#{$primary-stylename}-wrap {
+ display: inline-block;
+ }
+
+ .v-icon {
+ display: block;
+
+ + span:not(:empty) {
+ margin-top: ceil($v-unit-size/6);
+ margin-left: 0;
+ }
+ }
+}
@include animation($v-overlay-animate-in);
}
}
- @if $v-overlay-animate-out {
- &[class*="animate-out"] {
- @include animation($v-overlay-animate-out);
- }
- }
+ // No animate-out since that will currently prevent the dropdown from
+ // closing when the user selects an item
}
.#{$primary-stylename}-suggestmenu {
- @include valo-selection-overlay-style;
+ @include valo-selection-overlay-style($animate-in: false, $animate-out: false);
box-sizing: border-box;
position: relative;
z-index: 1;
+@include keyframes(v-popupview-animate-in) {
+ 0% {
+ @include transform(scale(0));
+ }
+}
+
@mixin valo-popupview ($primary-stylename: v-popupview) {
+ .#{$primary-stylename} {
+ @include valo-link-style;
+ }
+
.#{$primary-stylename}-popup {
- @include valo-overlay-style;
+ @include valo-overlay-style($animate-in: v-popupview-animate-in 120ms, $animate-out: (valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms));
.popupContent {
@include valo-panel-adjust-content-margins;
}
}
+
+ .#{$primary-stylename}-loading {
+ margin: $v-layout-spacing-vertical $v-layout-spacing-horizontal;
+ @include valo-spinner;
+ }
}
top: $_valo-slider-base-margin-vertical;
bottom: $_valo-slider-base-margin-vertical;
left: $_valo-slider-base-margin-horizontal;
- width: $v-border-radius;
+ width: $v-border-radius * 2;
border-radius: $v-border-radius;
border-left: valo-border($color: $v-selection-color, $context: $v-app-background-color);
}
}
}
+ .v-has-width > .#{$primary-stylename}-base {
+ min-width: 0;
+ }
+
.#{$primary-stylename}-handle {
margin-top: round(($v-unit-size - $v-slider-track-size)/-2);
width: .1px; // Firefox needs a non-zero value
left: $_valo-slider-base-margin-vertical;
right: $_valo-slider-base-margin-vertical;
width: auto;
- height: $v-border-radius;
+ height: $v-border-radius * 2;
border-left: none;
border-bottom: valo-border($color: $v-selection-color, $context: $v-app-background-color);
}
//display: block; // Fixes extra white-space under the textarea element
height: auto;
resize: none;
+
+ .v-ie8 &,
+ .v-ie9 & {
+ line-height: inherit;
+ padding-top: round($unit-size/9);
+ padding-bottom: round($unit-size/9);
+ }
}
height: $unit-size;
border-radius: $border-radius;
+ .v-ie8 &,
+ .v-ie9 & {
+ line-height: $unit-size;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
@if type-of($padding) == number or type-of($padding) == list {
padding: $padding;
} @else {
width: 1.9em;
height: $v-tree-row-height;
cursor: pointer;
+ // IE 9/10 need some color so that this element can receive mouse events.
+ // 'red' just happens to be the shortest color name.
+ background: red;
+ opacity: 0;
.v-ie8 & {
content: "+";
vertical-align: top;
@include valo-tree-collapsed-icon-style;
text-align: center;
+ background: transparent;
}
}
$v-window-background-color: $v-panel-background-color !default;
$v-window-border-radius: $v-border-radius !default;
-$v-window-shadow: 0 4px 20px 6px (v-shade 2), $v-overlay-shadow !default;
+$v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default;
$v-window-animate-in: valo-placeholder-animate-in 140ms, valo-anim-fade-in 140ms !default;
-$v-window-animate-out: valo-placeholder-animate-out 80ms, valo-anim-scale-down-fade-out 80ms !default;
+$v-window-animate-out: valo-placeholder-animate-out 100ms, valo-anim-scale-down-fade-out 100ms !default;
+$v-window-modality-curtain-background-color: #222 !default;
@if $v-animations-enabled {
right: 0;
bottom: 0;
left: 0;
- background: $v-app-background-color;
- @include opacity(.5);
+ @include radial-gradient(circle at 50% 50%, $v-window-modality-curtain-background-color, darken($v-window-modality-curtain-background-color, valo-gradient-opacity()), $fallback: $v-window-modality-curtain-background-color);
+ @include opacity(max(0.2, 0.8 - valo-gradient-opacity()/100%));
+ @include valo-anim-fade-in($duration: 400ms, $delay: 100ms);
+
+ .v-op12 & {
+ // Opera 12 has a shitbreak with the fade-in (flickers)
+ @include animation(none);
+ }
}
.#{$primary-stylename}-draggingCurtain {
@include valo-button-borderless-style;
}
+ .v-button-borderless-colored {
+ @include valo-button-borderless-style($font-color: $v-selection-color);
+ }
+
+ .v-button-quiet {
+ @include valo-button-quiet-style;
+ }
+
.v-button-link {
@include valo-button-borderless-style;
@include valo-link-style;
@include valo-button-icon-align-right-style;
}
+ .v-button-icon-align-top {
+ @include valo-button-icon-align-top-style;
+ }
+
.v-button-icon-only {
width: $v-unit-size;
padding: 0;
vertical-align: middle;
max-width: 30em;
text-align: left;
+ max-height: 20em;
+ overflow: auto;
}
h1 ~ p {
$v-overlay-padding-vertical: $v-overlay-padding !default;
$v-overlay-padding-horizontal: $v-overlay-padding !default;
-$v-overlay-shadow: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade 2-color-luminance($v-background-color)/255) !default;
+$v-overlay-shadow: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default;
$v-selection-overlay-background-color: $v-overlay-background-color !default;
$v-selection-overlay-padding: $v-overlay-padding !default;
-@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in) {
- @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in);
+@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in, $animate-out: $v-overlay-animate-out) {
+ @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in, $animate-out: $animate-out);
padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
}
// 'Placeholder' animation names to trigger VOverlay animation-in and animation-out
@include keyframes(valo-placeholder-animate-in) {
0% {
- outline-color: transparent;
+ visibility: visible;
}
}
@include keyframes(valo-placeholder-animate-out) {
100% {
- outline-color: transparent;
+ visibility: visible;
}
}
$ret: join($ret, $part);
}
}
-
+
@return $ret;
}
$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);
+ $tint: rgba(#fff, min(1, $v-shadow-opacity/100% * $adjust-amount));
+ $shade: rgba(#000, min(1, $v-shadow-opacity/100% * $adjust-amount));
$color: null;
@if $adjust-type == v-tint {