@mixin valo {
@include valo-common;
@include valo-components;
- @include valo-notification;
+
+ @if v-is-included(notification) {
+ @include valo-notification;
+ }
@if $valo-include-common-stylenames {
@include valo-common-stylenames;
-$v-accordion-content-shadow-style: join(inset, $v-shadow-style) !default;
-$v-accordion-content-shadow-depth: $v-shadow-depth/2 !default;
+$v-accordion-content-shadow: join(inset, $v-shadow) !default;
+$v-accordion-content-shadow-opacity: $v-shadow-opacity/2 !default;
@mixin valo-accordion ($primary-stylename: v-accordion) {
.#{$primary-stylename} {
@include valo-panel-style;
- @include valo-gradient($color: $v-background-color, $depth: $v-gradient-depth/2);
+ $grad-style: valo-gradient-style($v-gradient);
+ $grad-opacity: valo-gradient-opacity($v-gradient);
+ @include valo-gradient($color: $v-background-color, $gradient: ($grad-style $grad-opacity/2));
overflow: hidden;
}
overflow: hidden;
@if $v-border-radius > 0 {
- $_br: $v-border-radius - $v-border-width;
+ $_br: $v-border-radius - first-number($v-border);
&:first-child {
border-radius: $_br $_br 0 0;
+
+ .#{$primary-stylename}-item-caption {
+ border-radius: inherit;
+ }
}
&:last-child {
border-radius: 0 0 $_br $_br;
.#{$primary-stylename}-item-caption .v-caption {
@include valo-panel-caption-style;
+ border-radius: inherit;
display: block;
background: transparent;
- border-bottom-color: valo-panel-border-color($background-color: valo-panel-background-color());
+ border-bottom-color: first-color(valo-border($color: $v-panel-background-color));
cursor: pointer;
@include user-select(none);;
width: 100%;
bottom: 0;
right: 0;
- box-shadow: valo-shadow($shadow-style: $v-accordion-content-shadow-style, $shadow-depth: $v-accordion-content-shadow-depth);
- background-color: valo-panel-background-color();
+ box-shadow: valo-bevel-and-shadow($shadow: $v-accordion-content-shadow, $shadow-opacity: $v-accordion-content-shadow-opacity);
+ background-color: $v-panel-background-color;
@include box-sizing(border-box);
@include valo-panel-adjust-content-margins;
}
.#{$primary-stylename}-item-open + .#{$primary-stylename}-item {
- border-top: $v-panel-border-width solid valo-panel-border-color($background-color: valo-panel-background-color());
+ border-top: valo-border($color: $v-panel-background-color, $strength: 0.7);
}
-}
\ No newline at end of file
+}
@mixin valo-components {
-
+
@if v-is-included(absolutelayout) {
@include valo-absolutelayout;
}
-
+
@if v-is-included(orderedlayout) {
@include valo-orderedlayout;
}
-
+
@if v-is-included(button) {
@include valo-button;
}
-
+
@if v-is-included(checkbox) or v-is-included(optiongroup) {
@include valo-checkbox;
}
-
+
@if v-is-included(combobox) {
@include valo-combobox;
}
-
+
@if v-is-included(csslayout) {
@include valo-csslayout;
}
-
+
@if v-is-included(customcomponent) {
@include valo-customcomponent;
}
-
+
@if v-is-included(customlayout) {
@include valo-customlayout;
}
-
+
@if v-is-included(form) {
@include valo-form;
}
-
+
@if v-is-included(formlayout) {
@include valo-formlayout;
}
-
+
@if v-is-included(grid) {
@include valo-grid(v-escalator);
}
-
+
@if v-is-included(textfield) {
@include valo-textfield;
}
-
+
@if v-is-included(textarea) {
@include valo-textarea;
}
-
+
@if v-is-included(datefield) {
@include valo-datefield;
@include valo-inline-datefield;
}
-
+
@if v-is-included(orderedlayout) {
@include valo-orderedlayout;
}
-
+
@if v-is-included(gridlayout) {
@include valo-gridlayout;
}
-
+
@if v-is-included(menubar) {
@include valo-menubar;
}
-
+
@if v-is-included(optiongroup) {
@include valo-optiongroup;
}
-
+
@if v-is-included(link) {
@include valo-link;
}
-
+
@if v-is-included(window) {
@include valo-window;
}
-
+
@if v-is-included(tree) {
@include valo-tree;
}
-
+
@if v-is-included(table) or v-is-included(treetable) {
@include valo-table;
}
-
+
@if v-is-included(treetable) {
@include valo-treetable;
}
-
+
@if v-is-included(splitpanel) {
@include valo-splitpanel;
}
-
- @if v-is-included(progressbar) or v-is-included(progressindicator) {
+
+ @if v-is-included(progressbar) {
@include valo-progressbar;
- @include valo-progressbar(v-progressindicator);
}
-
+
+ @if v-is-included(progressindicator) {
+ @include valo-progressbar($primary-stylename: v-progressindicator);
+ }
+
@if v-is-included(slider) {
@include valo-slider;
}
-
+
@if v-is-included(tabsheet) {
@include valo-tabsheet;
}
-
+
@if v-is-included(colorpicker) {
@include valo-colorpicker;
}
-
+
@if v-is-included(panel) {
@include valo-panel;
}
-
+
@if v-is-included(accordion) {
@include valo-accordion;
}
-
+
@if v-is-included(twincolselect) {
@include valo-twincolselect;
}
-
+
@if v-is-included(nativeselect) {
@include valo-nativeselect;
}
-
+
@if v-is-included(calendar) {
@include valo-calendar;
}
-
+
@if v-is-included(label) {
@include valo-label;
}
-
+
@if v-is-included(dragwrapper) {
@include valo-dragwrapper;
}
-
+
@if v-is-included(loginform) {
@include valo-loginform;
}
-
+
@if v-is-included(nativebutton) {
@include valo-nativebutton;
}
-
+
@if v-is-included(nativeselect) {
@include valo-nativeselect;
}
-
+
@if v-is-included(popupview) {
@include valo-popupview;
}
-
+
@if v-is-included(richtextarea) {
@include valo-richtextarea;
}
-
+
@if v-is-included(upload) {
@include valo-upload;
}
-
-}
\ No newline at end of file
+
+}
-// @category Button
-
-// Values default to global values (evaluated when the mixins are called)
-$v-button-background-color: null !default;
-$v-button-bevel-style: null !default;
-$v-button-bevel-depth: null !default;
-$v-button-gradient-style: null !default;
-$v-button-gradient-depth: null !default;
-$v-button-shadow-style: null !default;
-$v-button-shadow-depth: null !default;
-$v-button-border-radius: $v-border-radius !default;
-$v-button-unit-size: null !default;
-
-$v-button-font-weight: max(400, $v-font-weight + 100) !default;
-$v-button-cursor: pointer !default;
-$v-button-hover-style-enabled: $v-hover-styles-enabled !default;
-$v-button-border-width: $v-border-width !default;
-$v-button-disabled-opacity: $v-disabled-opacity !default;
-
-
-
-// The main mixin for Valo buttons
-// @mixin valo-button
-// @param $primary-stylename {String} the primary stylename to use for the output. Defaults to <code>v-button</code>
@mixin valo-button ($primary-stylename: v-button) {
.#{$primary-stylename} {
- @include valo-button-common-properties;
+ @include valo-button-static-style;
@include valo-button-style;
}
}
-@mixin valo-button-common-properties {
- @include valo-tappable;
- cursor: $v-button-cursor;
- font-weight: $v-button-font-weight;
- position: relative;
- text-align: center;
- white-space: nowrap;
-
- // Generated element for :hover, :focus and :active styles
- &:after {
- content: "";
- position: absolute;
- top: -$v-button-border-width;
- right: -$v-button-border-width;
- bottom: -$v-button-border-width;
- left: -$v-button-border-width;
- border-radius: inherit;
- border: inherit;
- border-width: 0;
- @if $v-animations-enabled {
- @include transition(box-shadow 180ms, border 180ms);
+@mixin valo-button-static-style ($states: (normal, hover, focus, active, disabled), $vertical-centering: true) {
+ @if contains($states, normal) {
+ position: relative;
+ text-align: center;
+ white-space: nowrap;
+ outline: none;
+ @include valo-tappable;
+ @if $vertical-centering {
+ @include valo-button-vertical-centering;
}
}
- &.v-disabled {
- @include opacity($v-button-disabled-opacity);
-
+ @if contains($states, hover) or contains($states, focus) or contains($states, active) {
+ // Generated element for :hover, :focus and :active styles
&:after {
- display: none;
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border-radius: inherit;
+ @if $v-animations-enabled {
+ @include transition(box-shadow 180ms, border 180ms);
+ }
}
}
- @include valo-button-vertical-centering;
-}
-
-@mixin valo-button-vertical-centering {
- // Vertical centering of icon and caption, independent of the height of the button
- @include vertical-align-guide($to-align: div, $pseudo-element: before);
-
- // WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust
- .v-sa &:before {
- height: 110%;
+ @if contains($states, focus) {
+ &:focus:after {
+ @if $v-animations-enabled {
+ @include transition(none);
+ }
+ }
}
- // Firefox needs a bit of adjusting as well
- .v-ff &:before {
- height: 105%;
- }
+ @if contains($states, disabled) {
+ &.v-disabled {
+ @include opacity($v-disabled-opacity);
- // ...and so does IE. Who knew?
- .v-ie &:before {
- margin-top: 4px;
+ &:after {
+ display: none;
+ }
+ }
}
}
-@mixin valo-button-size ($unit-size, $border-radius) {
- height: $unit-size;
-
- $padding-width: ceil($unit-size/2.4);
- $padding-width: $padding-width + ceil($border-radius/3);
- padding: 0 $padding-width;
-
- .v-icon {
- margin: 0 ceil($padding-width/-5);
- }
+@mixin valo-button-style (
+ $unit-size : $v-unit-size,
+ $padding : null, // Computed by default
- .v-icon + span:not(:empty) {
- margin-left: ceil($padding-width/1.5);
- }
-}
+ $font-color : null, // Computed by default
+ $font-weight : $v-font-weight + 100,
+ $font-size : null, // Inherited by default
+ $cursor : null,
+ $background-color : $v-background-color,
+ $border : $v-border,
+ $border-radius : $v-border-radius,
+ $gradient : $v-gradient,
+ $bevel : $v-bevel,
+ $shadow : $v-shadow,
-@function valo-button-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
- $background-color: $v-button-background-color) {
+ $states : (normal, hover, focus, active, disabled)
+) {
- $background-color: $background-color or $v-background-color;
- $border-color: if(color-luminance($background-color) < color-luminance($v-background-color), $background-color, $v-background-color);
- $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2)));
- $border-color: scale-color($border-color, $saturation: -$bevel-depth/2);
- @if contains($bevel-style, v-shade, true) {
- $border-color: $border-color $border-color blend-multiply(transparentize(#000, max(0.8, 1-$bevel-depth/200%)), $border-color);
+ @if contains($states, focus) or contains($states, active) {
+ $border-width: first-number($border);
+ &:after {
+ border: inherit;
+ top: -$border-width;
+ right: -$border-width;
+ bottom: -$border-width;
+ left: -$border-width;
+ }
}
- @return $border-color;
-}
-
+ @if contains($states, normal) {
+ @if $unit-size {
+ height: $unit-size;
+ padding: if(type-of($padding) == number, $padding, (0 round($unit-size/2.4) + round($border-radius/3)));
+ }
+ $_font-color: $font-color or valo-font-color($background-color, 0.9);
+ color: $_font-color;
+ font-weight: $font-weight;
+ font-size: $font-size;
+ cursor: $cursor;
+ border-radius: $border-radius;
-@mixin valo-button-style ($gradient-style: $v-button-gradient-style, $gradient-depth: $v-button-gradient-depth,
- $bevel-style: $v-button-bevel-style, $bevel-depth: $v-button-bevel-depth,
- $unit-size: $v-button-unit-size, $border-radius: $v-button-border-radius,
- $background-color: $v-button-background-color) {
+ @if type-of($background-color) == color {
+ @include valo-border-with-gradient($border: $border, $color: darker-of($background-color, $v-background-color), $gradient: $gradient);
+ @include valo-gradient($background-color, $gradient);
+ box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient);
+ }
- // Set up variable defaults
- $background-color: $background-color or $v-background-color;
- $gradient-style: $gradient-style or $v-gradient-style;
- $gradient-depth: $gradient-depth or $v-gradient-depth;
- $bevel-style: $bevel-style or $v-bevel-style;
- $bevel-depth: $bevel-depth or $v-bevel-depth;
- $unit-size: $unit-size or $v-unit-size;
-
- @include valo-button-size($unit-size, $border-radius);
+ @if $bevel and type-of($_font-color) == color and type-of($background-color) == color {
+ text-shadow: valo-text-shadow($_font-color, $background-color, $bevel);
+ }
- border-radius: $border-radius;
- border: $v-button-border-width solid;
- border-color: valo-button-border-color($bevel-style, $bevel-depth, $background-color);
+ @if $bevel == none and $shadow == none {
+ box-shadow: none;
+ }
+ }
- @include valo-gradient($background-color, $gradient-style, $gradient-depth);
- color: valo-font-color($background-color, 0.9);
+ @if $background-color {
+ @if contains($states, hover) {
+ &:hover:after {
+ @include valo-button-hover-style($background-color);
+ }
+ }
- box-shadow: valo-button-box-shadow($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth);
- text-shadow: valo-button-text-shadow($background-color, $bevel-depth);
-
- @if $v-button-hover-style-enabled {
- &:hover:after {
- @include valo-button-hover-style($background-color: $background-color);
+ @if contains($states, focus) {
+ &:focus:after {
+ @include valo-button-focus-style($background-color);
+ }
}
- }
- &:focus {
- outline: none;
- &:after {
- @include valo-button-focus-style($background-color: $background-color);
+ @if contains($states, active) {
+ &:active:after {
+ @include valo-button-active-style($background-color);
+ }
}
}
+}
+
- &:active:after,
- &.v-pressed:after {
- @include valo-button-active-style($background-color: $background-color);
+
+
+@mixin valo-button-hover-style ($background-color: $v-background-color) {
+ $bg: darken($background-color, 25%);
+ @if is-dark-color($background-color) {
+ $bg: lighten($background-color, 15%);
}
-
+ background-color: rgba($bg, .1);
}
-@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit) {
+
+@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit, $include-box-shadow: true) {
$focus-color: valo-focus-color();
-
+
@if color-luminance($focus-color) + 50 < color-luminance($background-color) {
- border: $v-button-border-width solid $focus-color;
- } @else {
- border: $border-fallback or valo-button-border-color($background-color: $background-color);
+ border-color: $focus-color;
+ } @else if $border-fallback != none {
+ border: $border-fallback or valo-border($color: $background-color);
}
- box-shadow: valo-focus-box-shadow($color: $focus-color);
-
- @if $v-animations-enabled {
- @include transition(none);
- }
+ @include valo-focus-style($include-box-shadow: $include-box-shadow);
}
@mixin valo-button-active-style ($background-color: $v-background-color) {
- $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($v-background-color));
- background-color: rgba($bg, .1);
-
- .v-ie8 & {
- background-color: $bg;
- filter: alpha(opacity=10);
- }
+ $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($background-color));
+ background-color: rgba($bg, .2);
}
-@mixin valo-button-hover-style ($background-color: $v-background-color) {
- $bg: lighten($background-color, 15%);
- background-color: rgba($bg, .1);
- border: inherit;
-
- @if $v-animations-enabled {
- @include transition(none);
+
+
+@mixin valo-button-vertical-centering {
+ // Vertical centering of icon and caption, independent of the height of the button
+ @include valo-vertical-align-guide($to-align: div, $pseudo-element: before);
+
+ // WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust
+ .v-sa &:before {
+ height: 110%;
+ }
+
+ // Firefox needs a bit of adjusting as well
+ .v-ff &:before {
+ height: 107%;
}
-
- .v-ie8 & {
- background-color: $bg;
- filter: alpha(opacity=20);
+
+ // ...and so does IE. Who knew?
+ .v-ie &:before {
+ margin-top: 4px;
}
}
}
}
}
-
-
-
-@function valo-button-box-shadow($background-color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) {
- @return valo-bevel($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth), valo-shadow();
-}
-
-
-
-@function valo-button-text-shadow($background-color, $bevel-depth: $v-bevel-depth) {
- @if is-dark-color($background-color) {
- @return 0 -1px 0 transparentize(darken($background-color, $bevel-depth), 1-($bevel-depth/100%));
- } @else {
- @return 0 1px 0 transparentize(lighten($background-color, $bevel-depth), 1-($bevel-depth/100%));
- }
-}
.#{$primary-stylename}-month-day-scrollable {
overflow-y: scroll;
}
-
+
.#{$primary-stylename}-week-wrapper {
position: relative;
overflow: hidden;
}
-
+
.#{$primary-stylename}-current-time {
position: absolute;
left: 0;
background: red;
z-index: 2;
}
-
+
.#{$primary-stylename}-event-resizetop,
.#{$primary-stylename}-event-resizebottom {
position: absolute;
width: 100%;
z-index: 1;
}
-
+
.#{$primary-stylename}-event-resizetop {
cursor: row-resize;
top: 0;
cursor: row-resize;
bottom: 0;
}
-
-
+
+
// What a truckload of magic numbers!
// TODO Try to find out what these actually do, and how to make them dissappear
.#{$primary-stylename}-week-numbers {
//border-right: 1px solid;
}
-
+
.#{$primary-stylename}-month-sizedheight .#{$primary-stylename}-month-day {
height: 100px;
}
-
+
.#{$primary-stylename}-month-sizedwidth .#{$primary-stylename}-month-day {
width: 100px;
}
-
+
.#{$primary-stylename}-header-month-Hsized .#{$primary-stylename}-header-day {
width: 101px;
}
-
+
.#{$primary-stylename}-header-month-Hsized td:first-child {
padding-left: 21px;
}
-
+
.#{$primary-stylename}-header-day-Hsized {
width: 200px;
}
-
+
.#{$primary-stylename}-week-numbers-Vsized .#{$primary-stylename}-week-number {
height: 100px;
line-height: 100px;
}
-
+
.#{$primary-stylename}-week-wrapper-Vsized {
height: 400px;
overflow-x: hidden !important;
}
-
+
.#{$primary-stylename}-times-Vsized .#{$primary-stylename}-time {
height: 38px;
}
-
+
.#{$primary-stylename}-times-Hsized .#{$primary-stylename}-time {
width: 42px;
}
-
+
.#{$primary-stylename}-day-times-Vsized .v-datecellslot,
.#{$primary-stylename}-day-times-Vsized .v-datecellslot-even {
height: 18px;
}
-
+
.#{$primary-stylename}-day-times-Hsized,
.#{$primary-stylename}-day-times-Hsized .v-datecellslot,
.#{$primary-stylename}-day-times-Hsized .v-datecellslot-even {
}
.#{$primary-stylename}-month-day-selected {
- background-color: blend-normal(rgba(valo-selection-color(), .1), $v-background-color);
+ background-color: blend-normal(rgba($v-selection-color, .1), $v-background-color);
}
.#{$primary-stylename}-month-day-dragemphasis {
.#{$primary-stylename} .v-daterange {
position: relative;
-
+
&:before {
content: "";
position: absolute;
right: 0;
bottom: -1px;
left: 0;
- background: valo-selection-color();
+ background: $v-selection-color;
@include opacity(.5);
@if $v-border-radius > 0 {
border-radius: $v-border-radius $v-border-radius 0 0;
.#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event-content {
margin-top: -1px;
border-radius: $v-border-radius + 1px;
- border: 1px solid $v-background-color;
+ border: 1px solid $v-app-background-color;
padding-top: 3px;
margin-right: round($v-unit-size/8);
//margin-left: round($v-unit-size/8);
@mixin valo-checkbox ($primary-stylename: v-checkbox) {
-
+
.#{$primary-stylename},
.v-radiobutton {
- @include valo-checkbox-style;
+ @include valo-checkbox-style;
}
-
+
}
}
-@mixin valo-checkbox-style ($background-color: $v-button-background-color, $unit-size: $v-unit-size) {
- $background-color: $background-color or $v-background-color;
-
+@mixin valo-checkbox-style ($background-color: $v-background-color, $size: $v-unit-size, $selection-color: $v-selection-color) {
+
+ // So that we can use the same 'unit-size' for all component sizes
+ $size: $size/2;
+
position: relative;
- line-height: round($unit-size/2);
+ line-height: round($size);
white-space: nowrap;
&.v-has-width label {
}
:root & {
- padding-left: round($unit-size/1.5);
+ padding-left: round($size*1.33);
label {
@include valo-tappable;
}
}
-
+
:root & > input {
position: absolute;
clip: rect(0,0,0,0);
margin: 0;
&:focus ~ label:before {
- @include valo-button-focus-style($background-color: $background-color, $border-fallback: null);
- box-shadow: valo-button-box-shadow($background-color), valo-focus-box-shadow();
+ @include valo-button-focus-style($background-color: $background-color, $border-fallback: null, $include-box-shadow: false);
+ box-shadow: valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true);
}
& ~ label:before,
content: "";
display: inline-block;
@include box-sizing(border-box);
- width: round($unit-size/2);
- height: round($unit-size/2);
+ width: round($size);
+ height: round($size);
position: absolute;
top: 0;
left: 0;
- border-radius: min(round($unit-size/6), $v-border-radius);
- font-size: round($v-font-size * 0.8 * ($unit-size/$v-unit-size));
+ border-radius: min(round($size/3), $v-border-radius);
+ font-size: round($v-font-size * 0.8 * ($size*2/$v-unit-size));
text-align: center;
}
-
+
& ~ label:before {
- @include valo-button-style($background-color: $background-color, $unit-size: $unit-size);
+ @include valo-button-style($background-color: $background-color, $unit-size: $size, $border-radius: min(round($size/3), $v-border-radius));
padding: 0;
- height: round($unit-size/2);
+ height: round($size);
}
& ~ label:after {
@include transition(color 100ms);
}
}
-
+
&:active ~ label:after {
@include valo-button-active-style($background-color: $background-color);
}
-
+
&:checked ~ label:after {
- color: valo-selection-color($context: $background-color);
+ color: $selection-color;
}
&[disabled] {
+ ~ label,
+ ~ label .v-icon,
+ ~ .v-icon {
+ cursor: default;
+ }
+
~ label:before,
~ label:after {
@include opacity($v-disabled-opacity);
}
}
-
+
& > .v-icon,
& > label .v-icon {
- margin: 0 round($unit-size/6) 0 round($unit-size/12);
+ margin: 0 round($size/3) 0 round($size/6);
min-width: 1em;
+ cursor: pointer;
}
}
.#{$primary-stylename}-popup.v-window {
min-width: 220px !important;
}
-
+
+ .#{$primary-stylename}-gradient-container {
+ overflow: visible !important;
+ }
+
.#{$primary-stylename}-gradient-clicklayer {
@include opacity(0);
}
-
+
.rgb-gradient .#{$primary-stylename}-gradient-background {
background: url(#{$valo-colorpicker-pathPrefix}gradient2.png);
}
-
+
.hsv-gradient .#{$primary-stylename}-gradient-foreground {
background: url(#{$valo-colorpicker-pathPrefix}gradient.png);
}
-
- .#{$primary-stylename}-gradient-lowerbox {
- border-right: 1px solid rgba(122,122,122,.5);
- border-top: 1px solid rgba(122,122,122,.5);
- }
-
+
.#{$primary-stylename}-gradient-higherbox {
- border-left: 1px solid rgba(122,122,122,.5);
- border-bottom: 1px solid rgba(122,122,122,.5);
+ &:before {
+ content: "";
+ width: 11px;
+ height: 11px;
+ border-radius: 7px;
+ border: 1px solid #fff;
+ box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.3);
+ position: absolute;
+ bottom: -6px;
+ left: -6px;
+ }
}
.#{$primary-stylename}-popup .v-slider.v-slider-red:before {
background-color: red;
}
-
+
.#{$primary-stylename}-popup .v-slider.v-slider-green:before {
background-color: green;
}
-
+
.#{$primary-stylename}-popup .v-slider.v-slider-blue:before {
background-color: blue;
}
background: url(#{$valo-colorpicker-pathPrefix}slider_hue_bg.png);
}
- .#{$primary-stylename}-popup .v-textfield-dark {
+ .#{$primary-stylename}-popup input.v-textfield-dark {
color: #fff;
}
-
- .#{$primary-stylename}-popup .v-textfield-light {
+
+ .#{$primary-stylename}-popup input.v-textfield-light {
color: #000;
}
-
+
// TODO magic numbers
.#{$primary-stylename}-grid {
height: 319px;
}
-
+
.#{$primary-stylename}-popup .colorselect td {
line-height: 15px;
}
height: auto !important;
padding: round($v-unit-size/4) 0;
background-color: $v-background-color;
- border-top: $v-border-width solid scale-color($v-background-color, $lightness: -5%);
+ border-top: first-number($v-border) solid scale-color($v-background-color, $lightness: -5%);
.v-expand {
overflow: visible;
}
.#{$primary-stylename}-preview {
- width: auto !important;
+ width: 100% !important;
height: auto !important;
padding: round($v-unit-size/4);
}
}
}
-}
\ No newline at end of file
+}
-$v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
-
-
-
-
@mixin valo-combobox ($primary-stylename: v-filterselect) {
.#{$primary-stylename} {
.v-icon {
position: absolute;
+ pointer-events: none;
}
}
-
+
.#{$primary-stylename}-suggestpopup {
@include valo-combobox-popup-style;
}
+ .#{$primary-stylename}-no-input {
+ cursor: pointer;
+ text-shadow: valo-text-shadow();
+
+ .#{$primary-stylename}-input {
+ @include user-select(none);
+ @include valo-gradient;
+ cursor: inherit;
+ box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient);
+ @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient);
+ text-shadow: inherit;
+ text-overflow: ellipsis;
+ @if $v-border-radius != $v-textfield-border-radius {
+ border-radius: $v-border-radius;
+ }
+
+ &:focus {
+ @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color);
+ }
+ }
+
+ .#{$primary-stylename}-button {
+ border-left: none !important;
+ }
+
+ &:hover .#{$primary-stylename}-button:before {
+ color: inherit;
+ }
+ }
+
}
-@mixin valo-combobox-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
- $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
- $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
- $background-color: $v-textfield-background-color, $primary-stylename: v-filterselect) {
+@mixin valo-combobox-style (
+ $unit-size: $v-unit-size,
+
+ $font-color: null, // Computed by default
+ $font-weight: max(400, $v-font-weight),
+ $font-size: null, // Inherited by default
- $background-color: $background-color or valo-textfield-background-color($v-background-color);
- $bevel-style: $bevel-style or $v-bevel-style;
- $bevel-depth: $bevel-depth or $v-bevel-depth;
- $unit-size: $unit-size or $v-unit-size;
- $border-radius: $border-radius or $v-border-radius;
+ $background-color: $v-textfield-background-color,
+ $border: $v-textfield-border,
+ $border-radius: $v-textfield-border-radius,
+
+ $gradient: none,
+ $bevel: $v-textfield-bevel,
+ $shadow: $v-textfield-shadow,
+
+ $primary-stylename: v-filterselect
+ ) {
+
+ height: $unit-size;
+ border-radius: $border-radius;
.#{$primary-stylename}-input {
- @include valo-combobox-input-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $unit-size: $unit-size,
- $shadow-style: $shadow-style, $shadow-depth: $shadow-depth,
- $border-radius: $border-radius, $background-color: $background-color);
+ @include valo-combobox-input-style(
+ $unit-size: $unit-size,
+ $gradient: $gradient,
+ $bevel: $bevel,
+ $shadow: $shadow,
+ $border: $border,
+ $border-radius: $border-radius,
+ $background-color: $background-color,
+ $font-color: $font-color,
+ $font-size: $font-size,
+ $font-weight: $font-weight);
}
- .v-icon {
- max-height: $unit-size;
+ .v-icon + .#{$primary-stylename}-input {
+ padding-left: $unit-size;
+ }
+
+ img.v-icon {
$padding-width: ceil($unit-size/6);
+ max-height: $unit-size;
@if $border-radius {
$padding-width: $padding-width + ceil($border-radius/3);
}
margin-left: $padding-width;
+ }
- + .#{$primary-stylename}-input {
- padding-left: $padding-width + $unit-size;
- }
+ span.v-icon {
+ color: valo-font-color($background-color);
+ width: $unit-size;
}
-
+
&.#{$primary-stylename}-prompt > .#{$primary-stylename}-input {
- @include valo-textfield-prompt-style(valo-textfield-background-color($background-color));
+ @include valo-textfield-prompt-style($background-color);
}
.#{$primary-stylename}-button {
- @include valo-combobox-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
- $background-color: $background-color);
+ @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color);
}
-
+
&.v-disabled {
@include opacity($v-textfield-disabled-opacity);
& .#{$primary-stylename}-button {
-@mixin valo-combobox-input-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
- $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
- $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
- $background-color: $v-textfield-background-color) {
+@mixin valo-combobox-input-style (
+ $unit-size: $v-unit-size,
+ $padding: null, // Computed by default
+
+ $font-color: null, // Computed by default
+ $font-weight: null, // Inherited by default
+ $font-size: null, // Inherited by default
+
+ $background-color: $v-textfield-background-color,
+ $border: $v-border,
+ $border-radius: $v-textfield-border-radius,
+
+ $gradient: none,
+ $bevel: $v-bevel,
+ $shadow: $v-shadow
+) {
@include box-sizing(border-box);
- @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
- $shadow-style: $shadow-style, $shadow-depth: $shadow-depth,
- $unit-size: $unit-size, $border-radius: $border-radius,
- $background-color: $background-color) ;
- width: 100%;
+ @include valo-textfield-style($unit-size: $unit-size,
+ $padding: $padding,
+ $font-color: $font-color,
+ $font-weight: $font-weight,
+ $font-size: $font-size,
+ $background-color: $background-color,
+ $border: $border,
+ $border-radius: $border-radius,
+ $gradient: $gradient,
+ $bevel: $bevel,
+ $shadow: $shadow);
+ width: 100% !important; // Need to override calculated inline style which is sometimes added
height: 100%;
- padding-right: $unit-size * 1.2;
+ padding-right: round($unit-size * 1.2);
+ border-radius: inherit;
}
-@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
- $background-color: $v-textfield-background-color) {
+@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color) {
+ $border-width: first-number($v-textfield-border);
@include valo-tappable;
position: absolute;
- top: $v-textfield-border-width;
- right: $v-textfield-border-width;
- bottom: $v-textfield-border-width;
+ top: $border-width;
+ right: $border-width;
+ bottom: $border-width;
width: $unit-size;
cursor: pointer;
- border-left: $v-textfield-border-width solid blend-darken(black($bevel-depth/200%), $background-color);
+ border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+
+ .v-ie8 & {
+ background-color: $background-color;
+ }
@if $v-border-radius > 0 {
- border-radius: 0 $v-border-radius $v-border-radius 0;
+ $br: $v-border-radius - $border-width;
+ border-radius: 0 $br $br 0;
}
-
+
&:before {
@include valo-combobox-button-icon-style($background-color);
color: mix($background-color, valo-font-color($background-color));
margin-top: -.47em;
}
- @if $v-combobox-hover-style-enabled {
+ @if $v-hover-styles-enabled {
&:hover:before {
color: valo-font-color($background-color);
}
-@mixin valo-combobox-popup-style ($background-color: null) {
-
+@mixin valo-combobox-popup-style {
+
.v-filterselect-suggestmenu {
- @include valo-selection-overlay-style($background-color: $background-color);
+ @include valo-selection-overlay-style;
box-sizing: border-box;
position: relative;
z-index: 1;
}
margin-top: ceil($v-unit-size/8) !important;
-
+
table,
tbody,
tr,
td {
display: block;
}
-
+
.gwt-MenuItem {
@include valo-selection-item-style;
}
-
+
.gwt-MenuItem-selected {
- @include valo-selection-item-selected-style($parent-background-color: $background-color);
+ @include valo-selection-item-selected-style;
}
.v-filterselect-status {
position: absolute;
right: $v-border-radius;
- $bg: $background-color or $v-background-color;
- $bg: scale-color($bg, $lightness: -15%);
+ $bg: scale-color($v-background-color, $lightness: -15%);
background: transparentize($bg, .1);
color: valo-font-color($bg);
border-radius: 0 0 $v-border-radius $v-border-radius;
@if $v-animations-enabled {
@include animation(valo-combobox-show-status 200ms 80ms backwards);
}
-
+
> * {
color: valo-font-color($bg);
text-decoration: none;
}
}
-
+
div[class*="page"] {
position: absolute;
z-index: 3;
font-family: FontAwesome;
@include transform( scale(.8) );
- $bg: $background-color or $v-background-color;
- color: valo-font-color($bg);
-
+ color: valo-font-color($v-background-color);
+
&:hover {
@include opacity(1);
+ background: rgba($v-background-color, .5);
}
-
+
span {
// Hide text
display: none;
}
}
-
+
&:hover div[class*="page"] {
@include transform( scale(1) );
}
div[class*="prev"] {
top: 0;
@include transform-origin( 100% 0% );
+ border-radius: 0 $v-border-radius 0 $v-border-radius;
&:before {
content: "\f0d8";
}
-
+
}
-
+
div[class*="next"] {
bottom: 0;
@include transform-origin( 100% 100% );
+ border-radius: $v-border-radius 0 $v-border-radius 0;
&:before {
content: "\f0d7";
}
}
+
+ div[class*="-off"] {
+ display: none;
+ }
}
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
+
+ .v-widget ~ .v-widget.first.first {
+ border-radius: $v-border-radius 0 0 $v-border-radius;
+ }
+
+ .v-widget ~ .v-widget.last.last {
+ border-radius: 0 $v-border-radius $v-border-radius 0;
+ }
}
- // Assume most components have borders.
+ // Assume most components have borders.
// This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget
.v-widget {
vertical-align: middle;
-
+
+ $v-border-width: first-number($v-border);
+
@if $v-border-width > 0 {
margin-left: -$v-border-width;
} @else {
- margin-left: round($v-font-size/8);
+ margin-left: 1px;
}
&:first-child {
// Focused component should be on top
&:focus,
+ &[class*="focus"],
[class*="focus"] {
position: relative;
- z-index: 1;
+ z-index: 5;
}
}
}
-}
\ No newline at end of file
+}
-$v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
-
-
@mixin valo-datefield ($primary-stylename: v-datefield) {
.#{$primary-stylename} {
@mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) {
@include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel);
-}
+ .#{$primary-stylename}-calendarpanel {
+ position: relative;
+ background: $v-overlay-background-color;
+ padding: round($v-unit-size/6);
+ }
+}
-@mixin valo-datefield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
- $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
- $background-color: $v-textfield-background-color, $primary-stylename: v-datefield) {
- $background-color: $background-color or valo-textfield-background-color($v-background-color);
- $bevel-style: $bevel-style or $v-bevel-style;
- $bevel-depth: $bevel-depth or $v-bevel-depth;
- $unit-size: $unit-size or $v-unit-size;
- $border-radius: $border-radius or $v-border-radius;
+@mixin valo-datefield-style (
+ $bevel : $v-textfield-bevel,
+ $shadow : $v-textfield-shadow,
+ $unit-size : $v-unit-size,
+ $border : $v-textfield-border,
+ $border-radius : $v-textfield-border-radius,
+ $background-color : $v-textfield-background-color,
+ $primary-stylename : v-datefield
+ ) {
height: $unit-size;
+ border-radius: $border-radius;
.#{$primary-stylename}-textfield {
@include box-sizing(border-box);
- @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
- $unit-size: $unit-size, $border-radius: $border-radius,
- $background-color: $background-color) ;
+ @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color) ;
padding-left: $unit-size * 1.2;
width: 100%;
height: 100%;
+ border-radius: inherit;
}
&.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield {
- @include valo-textfield-prompt-style(valo-textfield-background-color($background-color));
+ @include valo-textfield-prompt-style($background-color);
}
.#{$primary-stylename}-button {
- @include valo-datefield-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
- $background-color: $background-color);
+ @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius);
}
&.v-disabled {
- @include opacity($v-textfield-disabled-opacity);
+ @include opacity($v-disabled-opacity);
.#{$primary-stylename}-button {
cursor: default;
-@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
- $background-color: $v-textfield-background-color) {
+@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius) {
+ $border-width: first-number($v-textfield-border);
@include valo-tappable;
-webkit-appearance: none;
background: transparent;
border: none;
padding: 0;
position: absolute;
- top: $v-textfield-border-width;
- bottom: $v-textfield-border-width;
- left: $v-textfield-border-width;
+ z-index: 10;
+ top: $border-width;
+ bottom: $border-width;
+ left: $border-width;
width: $unit-size;
- line-height: $unit-size - ($v-textfield-border-width*2);
+ line-height: $unit-size - ($border-width*2);
text-align: center;
cursor: pointer;
font: inherit;
- border-right: $v-textfield-border-width solid blend-darken(black($bevel-depth/200%), $background-color);
+ border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
outline: none;
margin: 0;
- @if $v-border-radius > 0 {
- $br: max(0, $v-border-radius - $v-textfield-border-width);
+ @if $border-radius > 0 {
+ $br: max(0, $border-radius - $border-width);
border-radius: $br 0 0 $br;
}
}
}
- @if $v-combobox-hover-style-enabled {
- &:hover:before {
- color: valo-font-color($background-color);
- }
+ &:hover:before {
+ color: valo-font-color($background-color);
}
&:active:after {
bottom: 0;
left: 0;
@include valo-button-active-style($background-color);
+ border-radius: inherit;
}
}
-@mixin valo-datefield-popup-style ($context: $v-background-color) {
- $copy: $v-background-color;
- $v-background-color: $context;
-
+@mixin valo-datefield-popup-style {
@include valo-overlay-style;
@include user-select(none);
}
@include valo-datefield-calendarpanel-style;
-
- $v-background-color: $copy;
}
td[class$="year"],
td[class$="month"] {
- //width: round($v-unit-size * 0.5);
-
button {
@include appearance(none);
border: none;
margin: 0;
cursor: pointer;
color: transparent;
+ font-size: 0; // For IE8, where transparent text is not possible
width: round($v-unit-size * 0.5);
height: round($v-unit-size * 0.67);
outline: none;
position: relative;
+ vertical-align: middle;
&:before {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
color: mix($v-background-color, valo-font-color($v-background-color));
font-size: round($v-font-size * 1.3);
line-height: round($v-font-size * 1.5);
width: round($v-unit-size * 2);
}
- .v-datefield-calendarpanel-weeknumber,
- .v-datefield-calendarpanel-weekdays.v-datefield-calendarpanel-weeknumbers td:first-child {
- width: round($v-unit-size * 0.7);
+ .#{$primary-stylename}-weeknumber,
+ .#{$primary-stylename}-weekdays.#{$primary-stylename}-weeknumbers td:first-child {
+ width: round($v-unit-size * 0.8);
color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7));
font-size: ceil($v-font-size * 0.86);
display: inline-block;
text-align: left;
}
+ .#{$primary-stylename}-weeknumber {
+ position: relative;
+ }
+
+ .#{$primary-stylename}-weeknumbers .v-first:before {
+ content: "";
+ position: absolute;
+ top: round($v-unit-size * 0.7) + round($v-unit-size/10)*2 + $v-overlay-padding-vertical;
+ bottom: 0;
+ left: 0;
+ width: round($v-unit-size * 0.7) + $v-overlay-padding-horizontal*2;
+ border-top: valo-border($color: $v-app-background-color, $strength: 0.3);
+ border-right: valo-border($color: $v-app-background-color, $strength: 0.3);
+ border-top-right-radius: $v-border-radius;
+ border-bottom-left-radius: $v-border-radius;
+ background: $v-app-background-color;
+ }
+
td.v-datefield-calendarpanel-time {
width: 100%;
font-size: ceil($v-font-size * 0.86);
@mixin valo-datefield-calendarpanel-day-style {
+ @include box-sizing(border-box);
width: round($v-unit-size * 0.8);
height: round($v-unit-size * 0.7);
+ border: first-number(valo-border()) solid transparent;
line-height: round($v-unit-size * 0.7);
text-align: center;
font-size: ceil($v-font-size * 0.86);
background: $v-background-color;
+
@if $v-border-radius > 0 {
border-radius: ceil($v-border-radius/2);
}
}
@mixin valo-datefield-calendarpanel-day-hover-style {
- color: valo-selection-color();
+ color: $v-selection-color;
}
@mixin valo-datefield-calendarpanel-day-offmonth-style {
}
@mixin valo-datefield-calendarpanel-day-today-style {
- color: valo-selection-color();
- background: blend-overlay(valo-selection-color(), $v-background-color);
- font-weight: $v-font-weight + 100;
+ color: valo-font-color($v-background-color, 0.9);
+ font-weight: max(600, $v-font-weight + 100);
+ border-color: valo-font-color($v-background-color, 0.3);
}
@mixin valo-datefield-calendarpanel-day-selected-style {
- color: valo-font-color(valo-selection-color());
- @include valo-gradient(valo-selection-color());
- font-weight: $v-font-weight + 100;
+ color: valo-font-color($v-selection-color);
+ @include valo-gradient($v-selection-color);
+ border: none;
}
@mixin valo-datefield-calendarpanel-day-focused-style {
- box-shadow: valo-focus-box-shadow();
+ @include valo-focus-style($include-box-shadow: true);
position: relative; // Show above other cells
+
+ .v-ie8 & {
+ border-color: $v-focus-color;
+ }
}
}
@mixin valo-datefield-calendarpanel-month-style {
- color: valo-selection-color();
+ color: $v-selection-color;
}
}
.v-active-drag-source {
- @include opacity(0);
+ // Can't hide since it will hide Tables and Trees as well
+ //@include opacity(0);
}
.#{$primary-stylename} {
@mixin valo-formlayout ($primary-stylename: v-formlayout) {
-
+
@include valo-formlayout-spacing;
@include valo-formlayout-margins;
.#{$primary-stylename} > table {
border-spacing: 0;
+ position: relative;
+ padding: 0 $v-layout-spacing-horizontal;
+ }
+
+ .#{$primary-stylename}.v-has-width > table,
+ .#{$primary-stylename}.v-has-width .#{$primary-stylename}-contentcell {
+ width: 100%;
}
.#{$primary-stylename}-error-indicator {
}
.#{$primary-stylename}-contentcell {
- .v-checkbox {
+ .v-checkbox,
+ .v-radiobutton {
font-weight: $v-font-weight + 100;
}
+
+ > .h4 {
+ position: absolute;
+ left: 0;
+ margin-top: -0.5em;
+ padding-bottom: 0.5em;
+ border-bottom: valo-border($color: $v-app-background-color, $strength: 0.5);
+ color: valo-font-color($v-app-background-color, .5);
+ }
}
+
+
}
}
.#{$primary-stylename}-margin-top > tbody > .#{$primary-stylename}-firstrow {
- > .#{$primary-stylename}-captioncell,
+ > .#{$primary-stylename}-captioncell,
> .#{$primary-stylename}-contentcell,
> .#{$primary-stylename}-errorcell {
padding-top: $top;
@mixin valo-formlayout-spacing ($primary-stylename: v-formlayout, $vertical: $v-layout-spacing-vertical) {
.#{$primary-stylename}-spacing > tbody > .#{$primary-stylename}-row {
- > .#{$primary-stylename}-captioncell,
+ > .#{$primary-stylename}-captioncell,
> .#{$primary-stylename}-contentcell,
> .#{$primary-stylename}-errorcell {
padding-top: $vertical;
@mixin valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) {
+ > table {
+ padding: 0;
+ }
+
> table > tbody > .#{$primary-stylename}-row {
- > .#{$primary-stylename}-captioncell,
+ > .#{$primary-stylename}-captioncell,
> .#{$primary-stylename}-contentcell,
> .#{$primary-stylename}-errorcell {
padding-top: 0;
}
> table > tbody > .#{$primary-stylename}-row td {
- border-bottom: $v-border-width solid darken($v-background-color, 5%);
+ border-bottom: valo-border($color: $v-app-background-color, $strength: 0.3);
}
> table > tbody > .#{$primary-stylename}-lastrow td {
}
> table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell {
- @include opacity(.7);
+ color: valo-font-color($v-background-color, .5);
text-align: right;
padding-left: ceil($v-unit-size/3);
line-height: $row-height;
}
- .v-textfield,
- .v-textarea,
- .v-filterselect,
- .v-datefield,
- .v-filterselect-input,
- .v-datefield-textfield {
- width: 100%;
- }
+ .#{$primary-stylename}-contentcell {
+ > .v-textfield,
+ > .v-textarea,
+ > .v-filterselect,
+ > .v-datefield,
+ > .v-filterselect-input,
+ > .v-datefield-textfield {
+ width: 100%;
+ }
- .v-textfield,
- .v-textarea,
- .v-filterselect-input,
- .v-datefield-textfield {
- background: transparent;
- border: none;
- box-shadow: none;
- border-radius: 0;
- @include valo-textfield-size($row-height, 0);
+ > .v-textfield,
+ > .v-textarea,
+ > .v-filterselect input,
+ > .v-datefield input {
+ @include valo-textfield-style($unit-size: $row-height, $border-radius: 0, $border: null, $bevel: none, $shadow: none, $background-color: null);
+ background: transparent;
+ border: none;
+ color: inherit;
+ }
+
+ > .v-textfield-prompt,
+ > .v-textarea-prompt,
+ > .v-filterselect-prompt input,
+ > .v-datefield-prompt input {
+ @include valo-textfield-prompt-style;
+ }
+
+ > .v-textarea {
+ height: auto;
+ }
}
- .v-textarea {
- height: auto;
+ .v-richtextarea {
+ margin: round($v-unit-size/8) 0;
}
.v-filterselect-button,
.v-checkbox {
margin-left: ceil($v-unit-size/6);
}
-}
+ > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell > .h4 {
+ border-bottom: none;
+ color: $v-selection-color;
+ margin-top: -0.2em;
+ }
+}
$v-letter-spacing--h1: -0.03em !default;
$v-letter-spacing--h2: -0.02em !default;
$v-letter-spacing--h3: 0 !default;
-$v-letter-spacing--h4: 0.05em !default;
+$v-letter-spacing--h4: 0 !default;
@mixin valo-label ($primary-stylename: v-label) {
.#{$primary-stylename}-undef-w {
white-space: nowrap;
}
-
+
h1, .h1,
h2, .h2,
h3, .h3 {
line-height: $v-line-height--header;
font-weight: $v-font-weight--header;
- color: valo-header-color($v-background-color);
+ color: valo-header-color($v-app-background-color);
}
-
+
h1, .h1 {
font-size: $v-font-size--h1;
margin-top: 1.4em;
font-family: $v-font-family--h1;
letter-spacing: $v-letter-spacing--h1;
}
-
+
h2, .h2 {
font-size: $v-font-size--h2;
font-family: $v-font-family--h2;
margin-bottom: 0.77em;
letter-spacing: $v-letter-spacing--h2;
}
-
+
h3, .h3 {
font-size: $v-font-size--h3;
font-family: $v-font-family--h3;
margin-bottom: 0.77em;
letter-spacing: $v-letter-spacing--h3;
}
-
+
h4, .h4 {
line-height: $v-line-height--header;
font-weight: $v-font-weight + 200;
font-size: $v-font-size--small;
- color: valo-header-color($v-background-color, $contrast: 0.12);
+ color: valo-header-color($v-app-background-color, $contrast: 0.12);
text-transform: uppercase;
letter-spacing: $v-letter-spacing--h4;
margin-top: 2.4em;
margin-top: $v-font-size;
}
}
-
+
h1, .h1,
h2, .h2,
h3, .h3,
margin: 0 !important;
}
}
-
+
.#{$primary-stylename}-large {
font-size: $v-font-size--large;
}
-
+
.#{$primary-stylename}-small {
font-size: $v-font-size--small;
}
-
+
.#{$primary-stylename}-bold {
font-weight: $v-font-weight + 200;
}
-
+
.#{$primary-stylename}-light {
font-weight: $v-font-weight - 100;
+ @if $v-font-weight < 400 {
+ color: valo-font-color($v-app-background-color, .5);
+ }
}
-
-}
\ No newline at end of file
+
+}
@mixin valo-menubar ($primary-stylename: v-menubar) {
- $copy: $v-button-hover-style-enabled;
- $v-button-hover-style-enabled: false;
-
.#{$primary-stylename} {
- @include valo-button-common-properties;
- @include valo-button-style;
+ @include valo-button-static-style($states: normal, $vertical-centering: false);
+ @include valo-button-style($states: normal, $cursor: default);
padding: 0;
text-align: left;
- }
+ overflow: hidden;
- $v-button-hover-style-enabled: $copy;
+ &:focus:not(.v-disabled) {
+ @include valo-button-focus-style($border-fallback: none, $include-box-shadow: false);
+ $box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient);
+ @if type-of($v-focus-style) == list {
+ $box-shadow: $box-shadow, $v-focus-style;
+ }
+ box-shadow: $box-shadow;
+ }
+
+ &.v-disabled {
+ @include opacity($v-disabled-opacity);
+ }
+ }
.#{$primary-stylename}:active:after {
background: transparent;
@include valo-menubar-menuitem-checked-style;
}
- .v-disabled > .#{$primary-stylename}-menuitem:before {
- display: none;
+ .v-disabled > .#{$primary-stylename}-menuitem,
+ .#{$primary-stylename} > .#{$primary-stylename}-menuitem-disabled {
+ cursor: default;
+
+ &:before {
+ display: none;
+ }
+ }
+
+ .#{$primary-stylename}-menuitem-disabled {
+ @include opacity($v-disabled-opacity);
}
.#{$primary-stylename} > .#{$primary-stylename}-menuitem-selected {
- @include valo-gradient($color: valo-selection-color());
- box-shadow: valo-button-box-shadow($background-color: valo-selection-color());
- text-shadow: valo-button-text-shadow($background-color: valo-selection-color());
- color: valo-font-color(valo-selection-color());
- $bc: valo-button-border-color($background-color: valo-selection-color());
- border-color: $bc;
-
- + .#{$primary-stylename}-menuitem {
- border-color: $bc;
- }
+ @include valo-button-style($states: normal, $background-color: $v-selection-color, $border-radius: 0, $shadow: null, $unit-size: null, $font-weight: null);
+ border-top-width: 0;
+ border-left-width: 0;
+ border-bottom-width: 0;
+ z-index: 2;
&:hover:before {
background: none;
.#{$primary-stylename}-popup {
@include valo-menubar-popup-style($primary-stylename);
- //margin-top: -$v-selection-overlay-padding-vertical !important;
- //margin-left: $v-selection-overlay-padding-horizontal !important;
}
}
@mixin valo-menubar-menuitem-style {
+ $border-width: first-number($v-border);
position: relative;
z-index: 1;
display: inline-block;
- @include valo-button-size($v-unit-size, $v-border-radius);
- height: $v-unit-size - $v-button-border-width*2;
- border-left: $v-button-border-width solid;
- border-color: inherit;
+ @include box-sizing(border-box);
+ @include valo-button-style($border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer);
+ background: transparent;
+ border-width: 0 $border-width 0 0;
+ height: 100%;
vertical-align: top;
- line-height: $v-unit-size - $v-button-border-width*2 - 1px;
- @include user-select(none);;
+ line-height: $v-unit-size - $border-width*2 - 1px;
+ text-align: center;
+ @if $border-width == 0 {
+ margin-right: 1px;
+ }
- $br: $v-button-border-radius - $v-button-border-width;
+ $br: $v-border-radius - $border-width - 1px;
&:first-child {
- border-left: none;
+ border-left-width: 0;
border-radius: $br 0 0 $br;
}
&:last-child {
border-radius: 0 $br $br 0;
+ margin-right: -$border-width;
}
&:first-child:last-child {
border-radius: $br;
+ border-right-width: 0;
+ margin-right: 0;
}
&:before {
- content: "";
content: "";
position: absolute;
top: 0;
border-radius: inherit;
}
- @if $v-button-hover-style-enabled {
- &:hover:before {
- @include valo-button-hover-style;
- border: none;
- }
+ &:hover:before {
+ @include valo-button-hover-style;
+ border: none;
}
&:active:before {
$margin-width: ceil($v-unit-size/2.4/5);
.v-icon {
margin: 0 $margin-width 0 #{-$margin-width};
+ cursor: inherit;
}
- &[class*="-icon-only"] .v-icon {
- margin: 0 #{-$margin-width};
+ &[class*="-icon-only"] {
+ width: $v-unit-size;
+ padding: 0;
+
+ .v-icon {
+ margin: 0;
+ }
}
}
margin: $v-selection-overlay-padding-vertical 0;
height: 0;
overflow: hidden;
- border-bottom: 1px solid darken(valo-overlay-background-color(), 5%);
+ border-bottom: valo-border($color: $v-overlay-background-color, $strength: 0.5);
+ @if first-number($v-border) == 0 {
+ border-bottom-width: 1px;
+ }
}
[class*="checked"] .#{$primary-stylename}-menuitem-caption:before {
[class*="disabled"] {
cursor: default;
- @include opacity($v-disabled-opacity);
}
$v-background-color: $copy;
}
-@mixin valo-menubar-menuitem-checked-style ($background-color: scale-color($v-background-color, $lightness: -5%, $saturation: -5%)) {
- @include valo-gradient($color: $background-color, $depth: $v-gradient-depth/4, $direction: to top);
+@mixin valo-menubar-menuitem-checked-style ($background-color: if(color-luminance($v-background-color) < 10, scale-color($v-background-color, $lightness: 10%, $saturation: -5%), scale-color($v-background-color, $lightness: -5%, $saturation: -5%))) {
+ $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4;
+ box-shadow: none;
+ @include valo-gradient($color: $background-color, $gradient: $grad, $direction: to top);
+ color: valo-font-color($background-color, 0.9);
+}
- @if color-luminance($background-color) < color-luminance($v-background-color) {
- $border-color: valo-button-border-color($background-color: $background-color);
- border-color: $border-color;
+@mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) {
+ .#{$primary-stylename}-menuitem-checked {
+ @include valo-menubar-menuitem-checked-style($background-color: $background-color);
+ }
+}
- + [class*="menuitem"] {
- @if length($border-color) > 1 {
- $border-color: nth($border-color, 2);
- }
- border-left-color: $border-color;
+
+
+@mixin valo-menubar-small-style ($primary-stylename: v-menubar, $unit-size: round($v-unit-size * 0.8)) {
+ height: $unit-size;
+
+ .#{$primary-stylename}-menuitem {
+ line-height: $unit-size - first-number($v-border)*2;
+
+ &[class*="-icon-only"] {
+ width: $unit-size;
}
}
-
- color: valo-font-color($background-color, 0.9);
- text-shadow: valo-button-text-shadow($background-color: $background-color);
}
-@mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) {
+@mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) {
+ border: none;
+ padding: first-number($v-border);
+ box-shadow: none;
+ background: transparent;
+ color: inherit;
+
+ &:focus:not(.v-disabled) {
+ border: none;
+ box-shadow: none;
+ }
+
+ .#{$primary-stylename}-menuitem {
+ box-shadow: none;
+ border: none;
+ margin-right: max(1px, first-number($v-border));
+ border-radius: $v-border-radius;
+ text-shadow: valo-text-shadow($offset: -1px);
+
+ @if $v-animations-enabled {
+ @include transition(color 140ms);
+ }
+
+ &:first-child,
+ &:last-child {
+ border-radius: inherit;
+ }
+
+ &:hover:before {
+ display: none;
+ }
+
+ &:active:not(.#{$primary-stylename}-menuitem-disabled):before {
+ display: block;
+ }
+
+ &:hover {
+ color: $v-focus-color;
+ }
+ }
+
.#{$primary-stylename}-menuitem-checked {
- @include valo-menubar-menuitem-checked-style($background-color: $background-color);
+ border: valo-border();
+ line-height: $v-unit-size - first-number($v-border)*4 - 1px;
+ color: $v-selection-color;
+ }
+
+ .#{$primary-stylename}-menuitem-selected {
+ $font-color: valo-font-color($v-selection-color, 0.9);
+ text-shadow: valo-text-shadow($background-color: $v-selection-color, $font-color: $font-color);
+
+ &:hover {
+ color: $font-color;
+ }
+ }
+
+ .#{$primary-stylename}-menuitem-disabled:hover {
+ color: inherit;
}
}
@mixin valo-nativeselect-select-style {
- $_border-color: darken($v-background-color, $v-bevel-depth);
- @if is-dark-color($v-background-color) {
- $_border-color: lighten($v-background-color, $v-bevel-depth);
- }
- border: $v-border-width solid $_border-color;
- background-color: valo-textfield-background-color($v-background-color);
+ border: valo-border();
+ @include valo-gradient;
&:focus {
outline: none;
- //@include valo-button-focus-style;
- box-shadow: valo-focus-box-shadow();
+ @include valo-focus-style($include-box-shadow: true);
}
-}
\ No newline at end of file
+}
@mixin valo-optiongroup ($primary-stylename: v-optiongroup) {
-
+
.v-radiobutton {
:root & > input {
&:checked ~ label:after {
height: $size;
top: $offset;
left: $offset;
- background: valo-selection-color($v-button-background-color);
+ background: $v-selection-color;
}
& ~ label:before,
}
}
}
-
+
.v-select-optiongroup {
-
+
.v-radiobutton,
.v-checkbox {
display: block;
margin: round($v-unit-size/4) $v-font-size 0 0;
-
+
&:first-child {
margin-top: round($v-unit-size/6);
}
+
+ &:last-child {
+ margin-bottom: round($v-unit-size/6);
+ }
}
&.v-has-width label {
white-space: normal;
}
-
+
+ }
+
+}
+
+
+@mixin valo-optiongroup-horizontal {
+ white-space: nowrap;
+
+ .v-radiobutton,
+ .v-checkbox {
+ display: inline-block;
+ }
+
+ &.v-has-width {
+ white-space: normal;
+
+ label {
+ white-space: nowrap;
+ }
}
-
-}
\ No newline at end of file
+}
div.v-layout.v-horizontal.v-widget {
white-space: nowrap;
}
-
+
.v-layout.v-vertical > .v-expand,
.v-layout.v-horizontal > .v-expand {
@include box-sizing(border-box);
width: 100%;
height: 100%;
-
+
// TODO fixes extra white space issues in some cases (can't remember what anymore), but causes some styles to clip
//overflow: hidden;
}
-
+
.v-slot,
.v-spacing {
display: inline-block;
vertical-align: top;
line-height: 0;
}
-
+
// Clear any floats inside the slot, to prevent unwanted collapsing
.v-vertical > .v-slot:after {
display: inline-block;
height: 0;
overflow: hidden;
}
-
+
.v-vertical > .v-slot,
.v-vertical > .v-expand > .v-slot {
display: block;
clear: both;
}
-
+
.v-horizontal > .v-slot,
.v-horizontal > .v-expand > .v-slot {
height: 100%;
}
-
+
.v-vertical > .v-spacing,
.v-vertical > .v-expand > .v-spacing {
width: 0;
display: block;
clear: both;
}
-
+
.v-horizontal > .v-spacing,
.v-horizontal > .v-expand > .v-spacing {
height: 0;
}
-
+
.v-align-middle:before,
.v-align-bottom:before,
.v-expand > .v-align-middle:before,
width: 0;
overflow: hidden;
}
-
+
.v-align-middle,
.v-align-bottom {
white-space: nowrap;
}
-
+
.v-align-middle > .v-widget,
.v-align-bottom > .v-widget {
display: inline-block;
.v-align-middle > .v-widget {
vertical-align: middle;
}
-
+
//.v-align-bottom,
.v-align-bottom > .v-widget {
vertical-align: bottom;
}
-
+
.v-align-center {
text-align: center;
}
-
+
.v-align-center > .v-widget {
margin-left: auto;
margin-right: auto;
}
-
+
.v-align-right {
text-align: right;
}
-
+
.v-align-right > .v-widget {
margin-left: auto;
}
-
+
.v-has-caption,
.v-has-caption > .v-caption {
// Force natural width to zero
display: inline-block;
}
-
+
.v-caption-on-left,
.v-caption-on-right {
white-space: nowrap;
}
-
+
.v-caption-on-top > .v-caption,
.v-caption-on-bottom > .v-caption {
display: block;
}
-
+
.v-caption-on-left > .v-caption {
padding-right: .5em;
}
-
+
.v-caption-on-right > .v-caption {
//vertical-align: top;
}
-
+
.v-caption-on-left > .v-widget,
.v-caption-on-right > .v-widget {
display: inline-block;
//vertical-align: middle;
}
-
+
.v-has-caption.v-has-width > .v-widget {
width: 100% !important;
}
-
+
.v-has-caption.v-has-height > .v-widget {
height: 100% !important;
}
-
+
}
@mixin valo-orderedlayout {
-
+
.v-margin-top {
padding-top: $v-layout-margin-top;
}
-
+
.v-margin-right {
padding-right: $v-layout-margin-right;
}
-
+
.v-margin-bottom {
padding-bottom: $v-layout-margin-bottom;
}
-
+
.v-margin-left {
padding-left: $v-layout-margin-left;
}
-
+
.v-spacing {
width: $v-layout-spacing-horizontal;
height: $v-layout-spacing-vertical;
}
-
+
}
@mixin valo-horizontallayout--wrapping {
white-space: normal !important;
-
+
& > .v-spacing + .v-slot,
& > .v-slot:first-child {
margin-bottom: $v-layout-spacing-vertical;
}
-
+
& > .v-slot:first-child:last-child {
margin-bottom: 0;
- }
-}
\ No newline at end of file
+ }
+}
-$v-panel-shadow-style: $v-shadow-style !default;
-$v-panel-border-width: $v-border-width !default;
-$v-panel-border-radius: $v-border-radius !default;
-
-$v-panel-caption-background-color: null !default;
-$v-panel-caption-gradient-depth: $v-gradient-depth/4 !default;
-$v-panel-caption-bevel-style: first($v-bevel-style) !default;
-$v-panel-caption-bevel-depth: $v-bevel-depth !default;
-
-
+$v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default;
+$v-panel-border: $v-border !default;
@mixin valo-panel ($primary-stylename: v-panel) {
-@function valo-panel-background-color ($context: $v-background-color) {
- $bg-color: lighten($context, 5%);
- @return $bg-color;
-}
-
-
-@function valo-panel-caption-background-color ($background-color) {
- @return $background-color or $v-background-color;
-}
-
-
-@function valo-panel-border-color ($background-color: $v-background-color) {
- $border-color: if(color-luminance($background-color) < color-luminance($v-background-color), $background-color, $v-background-color);
- $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-30%, -$v-bevel-depth/2)));
- $border-color: scale-color($border-color, $saturation: -$v-bevel-depth/2);
- @return $border-color;
+@mixin valo-panel-style (
+ $background-color : $v-panel-background-color,
+ $shadow : $v-shadow,
+ $border : $v-panel-border
+ ) {
+ background: $background-color;
+ color: valo-font-color($background-color);
+ border-radius: $v-border-radius;
+ border: valo-border($border: $border, $color: darker-of($background-color, $v-app-background-color), $strength: 0.7);
+ box-shadow: valo-bevel-and-shadow($shadow: $shadow);
}
-@mixin valo-panel-style {
- background: valo-panel-background-color();
- border-radius: $v-panel-border-radius;
- border: $v-panel-border-width solid valo-panel-border-color(valo-panel-background-color());
- box-shadow: valo-shadow($shadow-style: $v-panel-shadow-style);
-}
-
-@mixin valo-panel-caption-style ($background-color: $v-panel-caption-background-color) {
+@mixin valo-panel-caption-style (
+ $background-color : $v-background-color,
+ $bevel : first($v-bevel),
+ $gradient : valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4,
+ $border : $v-panel-border,
+ $border-radius : $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0
+ ) {
@include box-sizing(border-box);
padding: 0 round($v-unit-size/3);
- line-height: $v-unit-size;
- $_bg: valo-panel-caption-background-color($background-color);
- $_border-color: scale-color($_bg, $lightness: -$v-panel-caption-bevel-depth/2, $saturation: -$v-panel-caption-bevel-depth/2);
- border-bottom: $v-panel-border-width solid $_border-color;
- border-bottom-color: rgba($_border-color, .8);
- @include valo-gradient($color: $_bg, $depth: $v-panel-caption-gradient-depth);
- color: valo-font-color($_bg);
+ line-height: $v-unit-size - first-number($v-border);
+ $bg: $background-color;
+ border-bottom: valo-border($border: $border, $color: $bg, $strength: 0.5);
+ border-radius: $border-radius;
+ @include valo-gradient($color: $bg, $gradient: $gradient);
+ color: valo-font-color($bg);
font-weight: $v-caption-font-weight;
font-size: $v-caption-font-size;
- box-shadow: valo-bevel($_bg, $bevel-style: $v-panel-caption-bevel-style, $bevel-depth: $v-panel-caption-bevel-depth, $gradient-depth: $v-panel-caption-gradient-depth);
+ box-shadow: valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $gradient: $gradient);
+ text-shadow: valo-text-shadow(valo-font-color($bg), $bg, $v-bevel);
}
-@mixin valo-panel-well-style {
- $_bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%);
- background: $_bg;
- box-shadow: valo-shadow($shadow-style: (0 1px 0 0 v-hilite, join(inset, $v-panel-shadow-style)));
+
+@mixin valo-panel-well-style ($shadow: (0 1px 0 0 v-tint, join(inset, $v-shadow))) {
+ $bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%);
+ background: $bg;
+ color: valo-font-color($bg);
+ box-shadow: valo-bevel-and-shadow($shadow: $shadow);
border-radius: $v-border-radius;
- border: $v-border-width solid valo-panel-border-color(valo-panel-background-color());
+ border: valo-border();
.v-panel-caption {
background: transparent;
}
+
@mixin valo-panel-borderless-style {
background: transparent;
+ color: inherit;
border: none;
box-shadow: none;
.v-panel-caption {
background: transparent;
box-shadow: none;
+ color: inherit;
+ padding: 0;
+ margin: 0 round($v-unit-size/3);
+ border-bottom: none;
+ }
+}
+
+
+
+@mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) {
+ > .v-panel-captionwrap {
+ position: relative;
+ z-index: 2;
+
+ &:after {
+ content: "";
+ position: absolute;
+ bottom: -$border-width;
+ right: 0;
+ left: 0;
+ height: $border-width;
+ background: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
+ }
+ }
+
+ > .v-panel-content {
+ &:before {
+ content: "";
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ height: $border-width;
+ background: $v-app-background-color;
+ left: 0;
+ right: 0;
+ }
}
}
+
@mixin valo-panel-adjust-content-margins {
> .v-margin-top {
padding-top: round($v-unit-size/3);
padding-left: round($v-unit-size/3);
}
}
-
@mixin valo-popupview ($primary-stylename: v-popupview) {
-
-}
\ No newline at end of file
+ .#{$primary-stylename}-popup {
+ @include valo-overlay-style;
+
+ .popupContent {
+ @include valo-panel-adjust-content-margins;
+ }
+ }
+}
@mixin valo-progressbar ($primary-stylename: v-progressbar) {
-
+
.#{$primary-stylename}-wrapper {
@include valo-progressbar-track-style;
+ min-width: $v-unit-size * 2;
}
.#{$primary-stylename}-indicator {
@include valo-progressbar-indicator-style;
+ min-width: max($v-border-radius*2, 3px);
+ @include transition(width 160ms );
+ }
+
+
+ .#{$primary-stylename}-point {
+ .#{$primary-stylename}-indicator {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ text-align: right;
+ overflow: hidden;
+
+ &:before {
+ content: "";
+ display: inline-block;
+ @include valo-progressbar-indicator-style;
+ width: round($v-unit-size/4);
+ vertical-align: top;
+ }
+ }
}
}
-@mixin valo-progressbar-track-style {
+@mixin valo-progressbar-track-style ($background-color: $v-background-color) {
border-radius: $v-progressbar-border-radius;
height: round($v-unit-size/4);
- min-width: $v-unit-size * 2;
- @include valo-gradient($color: scale-color($v-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse);
- box-shadow: valo-textfield-box-shadow();
+ $bg-lightness: if(color-luminance($background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%));
+ @include valo-gradient($color: scale-color($background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to top);
@include box-sizing(border-box);
}
-@mixin valo-progressbar-indicator-style {
+@mixin valo-progressbar-indicator-style ($background-color: $v-selection-color, $border: $v-border) {
border-radius: $v-progressbar-border-radius;
height: inherit;
- min-width: max($v-border-radius*2, 3px);
- @include valo-gradient($color: valo-selection-color());
- box-shadow: valo-button-box-shadow($background-color: valo-selection-color(), $bevel-depth: $v-bevel-depth/2);
- border: $v-button-border-width solid;
- border-color: valo-button-border-color($v-bevel-style, $v-bevel-depth/2, valo-selection-color());
+ @include valo-gradient($color: $background-color);
+ box-shadow: valo-bevel-and-shadow($background-color: $background-color);
+ @if $border {
+ border: valo-border($border: $border, $color: $background-color, $context: $v-app-background-color);
+ } @else {
+ border: none;
+ }
@include box-sizing(border-box);
+ max-width: 100%;
}
+$valo-richtextarea-use-font-awesome: true !default;
+
@mixin valo-richtextarea ($primary-stylename: v-richtextarea) {
+ .#{$primary-stylename} {
+ @include valo-textfield-style($states: normal, $padding: 0);
+ height: auto;
+ overflow: hidden;
+ }
+
+ .#{$primary-stylename} .gwt-RichTextToolbar {
+ @include valo-gradient($color: $v-background-color);
+ box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-background-color, $gradient: $v-gradient);
+ border-bottom: valo-border();
+ color: valo-font-color($v-background-color);
+ }
+
.#{$primary-stylename} .gwt-ToggleButton,
.#{$primary-stylename} .gwt-PushButton {
display: inline-block;
+ line-height: $v-unit-size;
+ width: $v-unit-size;
+ text-align: center;
+ outline: none;
+
+ &:hover {
+ color: valo-font-color($v-background-color, 1);
+ }
+ }
+
+ .#{$primary-stylename} .gwt-ToggleButton-down,
+ .#{$primary-stylename} .gwt-ToggleButton-down-hovering {
+ $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4;
+ //box-shadow: none;
+ @include valo-gradient($color: darken($v-background-color, 10%), $gradient: $grad, $direction: to top);
+ }
+
+ @if $valo-richtextarea-use-font-awesome {
+
+ // List of title attribute values and Font Awesome icons for the formatting buttons
+ $icons: "Toggle Bold" "\f032",
+ "Toggle Italic" "\f033",
+ "Toggle Underline" "\f0cd",
+ "Toggle Subscript" "\f12c",
+ "Toggle Superscript" "\f12b",
+ "Left Justify" "\f036",
+ "Center" "\f037",
+ "Right Justify" "\f038",
+ "Toggle Strikethrough" "\f0cc",
+ "Indent Right" "\f03c",
+ "Indent Left" "\f03b",
+ "Insert Horizontal Rule" "—",
+ "Insert Ordered List" "\f0cb",
+ "Insert Unordered List" "\f0ca",
+ "Insert Image" "\f03e",
+ "Create Link" "\f0c1",
+ "Remove Link" "\f127",
+ "Remove Formatting" "\f12d";
+
+ .#{$primary-stylename} .gwt-RichTextToolbar-top {
+ img {
+ display: none;
+ }
+
+ div:before {
+ font-family: FontAwesome;
+ }
+
+ @each $pair in $icons {
+ div[title="#{first($pair)}"]:before {
+ content: "#{last($pair)}";
+ }
+ }
+ }
+ } // Use FontAwesome
+
+ .#{$primary-stylename} .gwt-RichTextToolbar-bottom {
+ font-size: round($v-font-size * 0.8);
+ padding: 0 round($v-unit-size/4) round($v-unit-size/4) 0;
+
+ select {
+ margin: round($v-unit-size/4) 0 0 round($v-unit-size/4);
+ }
+ }
+
+ .#{$primary-stylename} .gwt-RichTextArea {
+ background: #fff;
+ border: none;
+ display: block;
}
-}
\ No newline at end of file
+
+}
$v-slider-handle-height: round($v-unit-size/1.8) !default;
$v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;
+$_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/2);
+$_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
+
@mixin valo-slider ($primary-stylename: v-slider) {
@include valo-progressbar-track-style;
min-width: $v-unit-size * 2;
height: $v-slider-track-size;
- margin: round(($v-unit-size - $v-slider-track-size)/2) round($v-slider-handle-width/2);
+ margin: $_valo-slider-base-margin-vertical $_valo-slider-base-margin-horizontal;
white-space: nowrap;
overflow: hidden;
border-radius: $v-slider-track-border-radius;
+ &:before {
+ content: "";
+ position: absolute;
+ top: $_valo-slider-base-margin-vertical;
+ bottom: $_valo-slider-base-margin-vertical;
+ left: $_valo-slider-base-margin-horizontal;
+ width: $v-border-radius;
+ border-radius: $v-border-radius;
+ border-left: valo-border($color: $v-selection-color, $context: $v-app-background-color);
+ }
+
&:after {
@include valo-progressbar-indicator-style;
- min-width: 0;
content: "";
display: inline-block;
- //position: relative;
margin-left: -100%;
width: 100%;
vertical-align: top;
.v-ie8 & {
+ position: relative;
left: round(-$v-slider-handle-width/2);
}
}
}
&:after {
- @include valo-button-focus-style;
+ border: valo-border();
+ @include valo-button-focus-style();
opacity: 0;
@if $v-animations-enabled {
@include transition(opacity 200ms);
.#{$primary-stylename}-vertical {
padding: round($v-slider-handle-width/2) 0;
- height: $v-unit-size * 2; // Effectively min-height
+ height: $v-unit-size * 2 + $v-slider-handle-width; // Effectively min-height
.#{$primary-stylename}-base {
- @include valo-gradient($color: scale-color($v-background-color, $lightness: min($v-bevel-depth/-2, -5%), $saturation: $v-bevel-depth/-2), $style: linear-reverse, $direction: to right);
- min-width: 0;
+ $bg-lightness: if(color-luminance($v-background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%));
+ @include valo-gradient($color: scale-color($v-background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to left);
width: $v-slider-track-size;
height: 100% !important;
- min-height: $v-unit-size * 2;
+ min-width: 0;
margin: 0 round(($v-unit-size - $v-slider-track-size)/2);
+ &:before {
+ top: auto;
+ bottom: $_valo-slider-base-margin-horizontal;
+ left: $_valo-slider-base-margin-vertical;
+ right: $_valo-slider-base-margin-vertical;
+ width: auto;
+ height: $v-border-radius;
+ border-left: none;
+ border-bottom: valo-border($color: $v-selection-color, $context: $v-app-background-color);
+ }
+
&:after {
+ height: 101%;
margin-left: 0;
- @include valo-gradient($color: valo-selection-color(), $direction: to right);
+ @include valo-gradient($color: $v-selection-color, $direction: to right);
.v-ie8 & {
- top: round($v-slider-handle-width/2) - 2px;
+ top: round($v-slider-handle-width/2);
left: 0;
height: 130%;
}
}
}
-}
\ No newline at end of file
+}
+
+
+
+@mixin valo-slider-track-style ($primary-stylename: v-slider, $background-color: $v-background-color) {
+ .#{$primary-stylename}-base {
+ @include valo-progressbar-track-style($background-color: $background-color);
+ height: $v-slider-track-size;
+ }
+
+ &.#{$primary-stylename}-vertical {
+ .#{$primary-stylename}-base {
+ $bg-lightness: if(color-luminance($background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%));
+ @include valo-gradient($color: scale-color($background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to left);
+ }
+ }
+}
+
+@mixin valo-slider-indicator-style ($primary-stylename: v-slider, $background-color: $v-selection-color, $border: $v-border) {
+ .#{$primary-stylename}-base {
+ &:before {
+ border-color: first-color(valo-border($border: $border, $color: $background-color, $context: $v-app-background-color));
+ }
+
+ &:after {
+ @include valo-progressbar-indicator-style($background-color: $background-color, $border: $border);
+ }
+ }
+
+ &.#{$primary-stylename}-vertical {
+ .#{$primary-stylename}-base {
+ &:after {
+ @include valo-gradient($color: $background-color, $direction: to right);
+ }
+ }
+ }
+}
+
+
+@mixin valo-slider-no-indicator ($primary-stylename: v-slider) {
+ .#{$primary-stylename}-base:before,
+ .#{$primary-stylename}-base:after {
+ display: none;
+ }
+}
+
+
+@mixin valo-slider-handle-style ($primary-stylename: v-slider, $background-color: $v-background-color) {
+ .#{$primary-stylename}-handle {
+ &:before {
+ @include valo-button-style($background-color: $background-color, $unit-size: null, $border-radius: null);
+ }
+
+ &:after {
+ border: valo-border($color: $background-color);
+ @include valo-button-focus-style($background-color: $background-color);
+ }
+ }
+}
+
+
+@mixin valo-slider-ticks ($primary-stylename: v-slider, $tick-count: 5) {
+ $tick-size: max(1px, first-number($v-border));
+ $tick-color: first-color(valo-border($strength: 0.7));
+
+ &:before {
+ content: "";
+ height: 15%;
+ position: absolute;
+ @include linear-gradient(to right, $tick-color $tick-size, transparent $tick-size, $fallback: transparent);
+ background-repeat: repeat-x;
+ background-size: 100%/($tick-count - 1) - 0.1% 100%;
+ left: $_valo-slider-base-margin-horizontal;
+ right: $_valo-slider-base-margin-horizontal;
+ }
+
+ &.#{$primary-stylename}-vertical:before {
+ height: auto;
+ width: 15%;
+ @include linear-gradient(to bottom, $tick-color $tick-size, transparent $tick-size, $fallback: transparent);
+ background-repeat: repeat-y;
+ background-size: 100% 100%/($tick-count - 1) - 0.01%;
+ right: auto;
+ left: 0;
+ top: $_valo-slider-base-margin-horizontal;
+ bottom: $_valo-slider-base-margin-horizontal;
+ }
+}
-$v-splitpanel-splitter-size: round($v-unit-size/5) !default;
-
-
@mixin valo-splitpanel($primary-stylename : v-splitpanel) {
+ // No need for parent selector
+ @include valo-splitpanel-style($primary-stylename: $primary-stylename);
+}
- // Disable splitter shadow (should most likely be a variable)
- $copy: $v-shadow-depth;
- $v-shadow-depth: 0%;
- // Round to even number
- $v-splitpanel-splitter-size: $v-splitpanel-splitter-size + $v-splitpanel-splitter-size%2;
+
+@mixin valo-splitpanel-global ($primary-stylename : v-splitpanel) {
.#{$primary-stylename}-vertical,
.#{$primary-stylename}-horizontal {
overflow: hidden;
}
.#{$primary-stylename}-hsplitter {
- width: $v-splitpanel-splitter-size;
+ z-index: 100;
+ cursor: e-resize;
+ cursor: col-resize;
}
- .#{$primary-stylename}-hsplitter div,
- .#{$primary-stylename}-vsplitter div {
- @include valo-button-style;
- @include box-sizing(border-box);
- height: auto;
- padding: 0;
- border-radius: 0;
- position: absolute;
- z-index: 1;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
+ .#{$primary-stylename}-vsplitter {
+ z-index: 100;
cursor: s-resize;
cursor: row-resize;
+ }
- &:before {
+ // Element which acts as the active dragging area
+ .#{$primary-stylename}-hsplitter,
+ .#{$primary-stylename}-vsplitter {
+ &:after {
content: "";
- width: $v-unit-size;
- height: 0;
- border: 1px solid;
- $color: $v-button-background-color or $v-background-color;
- $shade: max($v-bevel-depth, 10%);
- $border-color1: scale-color($color, $lightness: -$shade, $saturation: -$shade/2);
- $border-color2: scale-color($color, $lightness: -$shade/2, $saturation: -$shade/4);
- border-color: $border-color1 $border-color2 $border-color2 $border-color1;
position: absolute;
- top: 50%;
- left: 50%;
- margin-left: round(-$v-unit-size/2);
- margin-top: -1px;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
}
- }
- .#{$primary-stylename}-vsplitter {
- height: $v-splitpanel-splitter-size;
+ div {
+ width: inherit;
+ height: inherit;
+ overflow: hidden;
+ position: relative;
+ }
}
- .#{$primary-stylename}-hsplitter div {
- cursor: e-resize;
- cursor: col-resize;
- $color: $v-button-background-color or $v-background-color;
- @include valo-gradient($color: $color, $direction: to right);
-
+ .#{$primary-stylename}-hsplitter div,
+ .#{$primary-stylename}-vsplitter div {
&:before {
- width: 0;
- height: $v-unit-size;
- margin-left: -1px;
- margin-top: round(-$v-unit-size/2);
+ @include box-sizing(border-box);
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
}
}
.#{$primary-stylename}-second-container {
position: static !important;
display: inline-block;
- margin-left: $v-splitpanel-splitter-size; /* Match to the width of the splitter element */
vertical-align: top;
}
vertical-align: top;
}
}
-
- $v-shadow-depth: $copy;
-
}
+@mixin valo-splitpanel-style(
+ $primary-stylename : v-splitpanel,
+ $splitter-size: max(1px, first-number($v-border)),
+ $splitter-active-size: round($v-unit-size/3),
+ $splitter-handle-visible: false,
+ $splitter-shadow: none,
+ $orientation: vertical horizontal
+ ) {
+ @if contains($orientation, horizontal) {
+ .#{$primary-stylename}-hsplitter {
+ width: $splitter-size;
+ }
+ }
-@mixin valo-splitpanel-small ($primary-stylename: v-splitpanel, $stylename: small) {
- .#{$primary-stylename}-vsplitter-#{$stylename},
- .#{$primary-stylename}-hsplitter-#{$stylename} {
- div {
- @include opacity(0);
- @include transition(opacity 200ms);
+ @if contains($orientation, vertical) {
+ .#{$primary-stylename}-vsplitter {
+ height: $splitter-size;
}
+ }
- &:hover div {
- @include opacity(1);
+ $offset: round(($splitter-active-size - $splitter-size)/-2);
+
+ @if contains($orientation, horizontal) {
+ .#{$primary-stylename}-hsplitter:after {
+ left: $offset;
+ right: $offset;
}
}
- .#{$primary-stylename}-vsplitter-#{$stylename} {
- div {
- left: 40%;
- right: 40%;
- height: $v-splitpanel-splitter-size + 1px;
- top: round($v-splitpanel-splitter-size/-2);
+ @if contains($orientation, vertical) {
+ .#{$primary-stylename}-vsplitter:after {
+ top: $offset;
+ bottom: $offset;
+ }
+ }
+ @if contains($orientation, horizontal) or contains($orientation, vertical) {
+ .#{$primary-stylename}-hsplitter div,
+ .#{$primary-stylename}-vsplitter div {
&:before {
- width: 50%;
- left: 25%;
- margin-left: 0;
+ @include valo-button-style($shadow: $splitter-shadow);
+ height: auto;
+ padding: 0;
+ border-radius: 0;
}
}
+ }
- &:before {
- content: "";
- position: absolute;
- height: 1px;
- left: 0;
- right: 0;
- background: darken($v-background-color, max($v-bevel-depth/2, 10%));
+ @if contains($orientation, horizontal) {
+ .#{$primary-stylename}-hsplitter div {
+ &:before {
+ $color: $v-background-color;
+ @include valo-gradient($color: $color, $direction: to right);
+ }
}
}
- .#{$primary-stylename}-hsplitter-#{$stylename} {
- div {
- top: 40%;
- bottom: 40%;
- width: $v-splitpanel-splitter-size + 1px;
- left: round($v-splitpanel-splitter-size/-2);
+ @if $splitter-handle-visible {
+ .#{$primary-stylename}-vsplitter div,
+ .#{$primary-stylename}-hsplitter div {
+ &:after {
+ @include valo-splitpanel-splitter-handle-style;
+ }
+ }
- &:before {
- height: 50%;
- top: 25%;
- margin-top: 0;
+ @if contains($orientation, horizontal) {
+ .#{$primary-stylename}-hsplitter div {
+ &:after {
+ @include valo-splitpanel-splitter-handle-style($horizontal: true, $include-common: false);
+ }
}
}
+ }
- &:before {
- content: "";
- position: absolute;
- width: 1px;
- top: 0;
- bottom: 0;
- background: darken($v-background-color, max($v-bevel-depth/2, 10%));
+ @if contains($orientation, horizontal) {
+ &.#{$primary-stylename}-horizontal {
+ .#{$primary-stylename}-second-container {
+ margin-left: $splitter-size;
+ }
}
}
+}
+
+
+
+/*
+@mixin valo-splitpanel-style ($splitter-size: ) {
+ > div > .v-splitpanel-hsplitter {
+ width: ;
+
+ div:after {
+ @include valo-splitpanel-splitter-handle-style($horizontal: true);
+ }
- .#{$primary-stylename}-vertical .#{$primary-stylename}-second-container-#{$stylename} {
- margin-top: 1px;
- position: static !important;
+ &:after {
+ left: 0;
+ right: 0;
+ }
+ }
+ .v-splitpanel-horizontal .v-splitpanel-second-container
+}
+*/
+
+
+
+@mixin valo-splitpanel-splitter-handle-style ($horizontal: false, $include-common: true) {
+ @if $include-common {
+ content: "";
+ border: valo-border($strength: 0.6);
+ $border-color: first-color(valo-border($strength: 1.2));
+ border-top-color: $border-color;
+ border-left-color: $border-color;
+ position: absolute;
+ top: 50%;
+ left: 50%;
}
- .#{$primary-stylename}-horizontal .#{$primary-stylename}-second-container-#{$stylename} {
- margin-left: 1px;
+ @if $horizontal {
+ width: 0;
+ height: $v-unit-size;
+ margin-left: first-number($v-border)*-1;
+ margin-top: round(-$v-unit-size/2);
+ } @else {
+ width: $v-unit-size;
+ height: 0;
+ margin-left: round(-$v-unit-size/2);
+ margin-top: first-number($v-border)*-1;
}
}
$v-table-row-height: $v-unit-size !default;
-$v-table-border-width: $v-border-width !default;
+$v-table-border-width: first-number($v-border) !default;
$v-table-border-color: null !default;
$v-table-border-radius: 0 !default;
$v-table-cell-padding-horizontal: round($v-unit-size/3) !default;
@mixin valo-table ($primary-stylename: v-table) {
$background-color: $v-table-background-color or valo-table-background-color();
- $border-color: $v-table-border-color or darken($v-background-color, max(5%, $v-bevel-depth/3));
+ $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.8));
.#{$primary-stylename} {
// For scroll position indicator
position: relative;
background: $v-background-color;
+ color: valo-font-color($v-background-color);
}
- .v-table-header table,
- .v-table-footer table,
+ .v-table-header table,
+ .v-table-footer table,
.v-table-table {
outline: $v-table-border-width solid $border-color;
}
@include valo-gradient($v-background-color);
white-space: nowrap;
font-size: $v-table-header-font-size;
- text-shadow: valo-button-text-shadow($v-background-color, $v-bevel-depth);
+ text-shadow: valo-text-shadow;
}
.#{$primary-stylename}-header-wrap {
.#{$primary-stylename}-cell-content {
border-left: $v-table-border-width solid $border-color;
padding: 0 $v-table-cell-padding-horizontal;
+
+ &:first-child {
+ border-left: none;
+ padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
+ }
}
.#{$primary-stylename}-header td:first-child .#{$primary-stylename}-caption-container,
- .#{$primary-stylename}-footer td:first-child,
- .#{$primary-stylename}-cell-content:first-child {
+ .#{$primary-stylename}-footer td:first-child {
border-left-color: transparent;
}
+
.#{$primary-stylename}-cell-wrapper {
white-space: nowrap;
line-height: 1;
border-top: none;
}
+ .#{$primary-stylename}-row {
+ background-color: $background-color;
+ }
+
.#{$primary-stylename}-row-odd {
- background-color: darken($background-color, 2%);
+ $bg-lightness: if(color-luminance($background-color) < 10, 4%, -4%);
+ background-color: scale-color($background-color, $lightness: $bg-lightness);
}
.#{$primary-stylename} [class*="-row"].v-selected {
- $selected-border-color: darken(valo-selection-color(), 8%);
+ $selected-border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%);
- @include valo-gradient(valo-selection-color());
+ @include valo-gradient($v-selection-color);
background-origin: border-box;
- color: valo-font-color(valo-selection-color(), 0.9);
- text-shadow: valo-button-text-shadow(valo-selection-color(), $v-bevel-depth);
+ color: valo-font-color($v-selection-color, 0.9);
+ text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth);
+ .v-selected {
- $gradient-end: first(last(valo-gradient-color-stops(valo-selection-color())));
+ $gradient-end: first(last(valo-gradient-color-stops($v-selection-color)));
background: $gradient-end;
td {
border-top-color: $gradient-end;
}
}
-
+
.#{$primary-stylename}-cell-content {
border-color: transparent;
border-left-color: $selected-border-color;
&:after {
content: "";
position: absolute;
+ $v-button-border-width: first-number($v-border);
top: -$v-button-border-width;
right: -$v-button-border-width;
bottom: -$v-button-border-width;
tr {
display: block;
- @include valo-drag-element-style;
+ @include valo-drag-element-style($background-color: null);
+ background: $background-color;
&[style*="hidden"] {
@mixin valo-table-no-vertical-lines ($primary-stylename: v-table) {
.#{$primary-stylename}-cell-content,
[class*="row"].v-selected .#{$primary-stylename}-cell-content {
- border-left-color: transparent;
- border-right-color: transparent;
+ border-left: none;
+ border-right: none;
+ padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
+ padding-right: $v-table-cell-padding-horizontal + $v-table-border-width;
}
}
@mixin valo-table-no-horizontal-lines ($primary-stylename: v-table) {
.#{$primary-stylename}-cell-content,
[class*="row"].v-selected .#{$primary-stylename}-cell-content {
- border-top-color: transparent;
- border-bottom-color: transparent;
+ border-top: none;
+ border-bottom: none;
}
}
.#{$primary-stylename}-body {
border: none;
}
+
+ // TODO copy pasted from the main mixin
+ $background-color: $v-table-background-color or valo-table-background-color();
+ $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.7));
+
+ .#{$primary-stylename}-header-wrap {
+ border-bottom: $v-table-border-width solid $border-color;
+ }
+
+ .#{$primary-stylename}-footer-wrap {
+ border-top: $v-table-border-width solid $border-color;
+ }
+}
+
+@mixin valo-table-compact-style (
+ $primary-stylename: v-table,
+ $row-height: $v-table-row-height,
+ $header-font-size: $v-table-header-font-size,
+ $cell-padding-horizontal: $v-table-cell-padding-horizontal
+ ) {
+
+ .#{$primary-stylename}-header-wrap,
+ .#{$primary-stylename}-footer-wrap,
+ .#{$primary-stylename}-header-drag {
+ font-size: $header-font-size;
+ }
+
+ .#{$primary-stylename}-footer-container {
+ $vertical-padding: round(($row-height - $header-font-size)/2);
+ padding-top: $vertical-padding - $v-table-border-width;
+ padding-bottom: $vertical-padding;
+ padding-right: $cell-padding-horizontal + $v-table-border-width;
+ }
+
+ .#{$primary-stylename}-caption-container,
+ .#{$primary-stylename}-header-drag {
+ $vertical-padding: round(($row-height - $header-font-size)/2);
+ padding-top: $vertical-padding;
+ padding-bottom: $vertical-padding - $v-table-border-width;
+ padding-left: $cell-padding-horizontal;
+ padding-right: $cell-padding-horizontal;
+ }
+
+ .#{$primary-stylename}-resizer {
+ height: $row-height;
+ }
+
+ .#{$primary-stylename}-cell-wrapper {
+ $vertical-padding: round(($row-height - $v-font-size)/2);
+ padding: $vertical-padding 0;
+ }
+
+ .#{$primary-stylename}-cell-content {
+ padding: 0 $cell-padding-horizontal;
+
+ &:first-child {
+ padding-left: $cell-padding-horizontal + $v-table-border-width;
+ }
+ }
+
+ .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator,
+ .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator {
+ height: $row-height;
+ line-height: $row-height;
+ }
+
+ .#{$primary-stylename}-header-drag {
+ margin-top: round($row-height/-2);
+ }
+
+ .#{$primary-stylename}-row-drag-middle td:first-child:before {
+ height: $row-height + $v-table-border-width;
+ }
}
.#{$primary-stylename} .v-disabled .#{$primary-stylename}-caption-close {
display: none;
}
-
+
.#{$primary-stylename}-content {
position: relative;
}
-
+
}
.#{$primary-stylename}-tabcontainer {
position: relative;
line-height: $v-unit-size;
- @include user-select(none);;
+ @include user-select(none);
table,
tbody,
&:before {
content: "";
position: absolute;
- height: $v-border-width;
+ height: max(1px, first-number($v-border));
background: $border-color;
bottom: 0;
left: 0;
line-height: $v-unit-size;
font-size: $v-font-size;
font-weight: $v-font-weight;
+ color: valo-font-color($v-app-background-color, 0.6);
width: auto !important;
@if $v-animations-enabled {
}
&:hover {
- color: valo-selection-color();
+ color: $v-selection-color;
}
&.v-disabled {
outline: none;
.v-caption {
- color: valo-selection-color();
- border-bottom: $v-border-width solid valo-selection-color();
+ color: $v-selection-color;
+ border-bottom: max(1px, first-number($v-border)) solid $v-selection-color;
}
}
.#{$primary-stylename}-tabitem-selected .v-caption.v-caption {
- border-bottom: $v-border-width*2 solid valo-selection-color();
- color: valo-selection-color();
+ border-bottom: max(1px, first-number($v-border))*2 solid $v-selection-color;
+ color: $v-selection-color;
}
.#{$primary-stylename}-caption-close {
border-radius: round($v-border-radius/2);
&:hover {
- background: valo-selection-color();
- color: valo-font-color(valo-selection-color());
+ background: $v-selection-color;
+ color: valo-font-color($v-selection-color);
}
&:active {
- background: darken(valo-selection-color(), 5%);
- color: valo-font-color(valo-selection-color());
+ background: darken($v-selection-color, 5%);
+ color: valo-font-color($v-selection-color);
}
}
&:after {
content: "";
- height: $v-border-width;
+ height: first-number($v-border);
position: absolute;
bottom: 0;
left: 0;
&:hover {
@include opacity(1);
- color: valo-selection-color();
+ color: $v-selection-color;
}
&:active {
@include opacity(.7);
- color: valo-selection-color();
+ color: $v-selection-color;
}
&::-moz-focus-inner {
[class*="disabled"] {
cursor: default;
color: inherit !important;
- @include opacity(.1, true);
+ @include opacity(.1 !important);
}
}
}
@mixin valo-tabsheet-only-selected-closable ($primary-stylename: v-tabsheet) {
- .#{$primary-stylename}-caption-close {
+ > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-caption-close {
visibility: hidden;
}
- .#{$primary-stylename}-tabitem-selected .#{$primary-stylename}-caption-close {
+ > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabitem-selected .#{$primary-stylename}-caption-close {
visibility: visible;
}
}
@mixin valo-tabsheet-padded-tabbar ($primary-stylename: v-tabsheet) {
- .#{$primary-stylename}-tabs {
+ > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabs {
padding: 0 round($v-unit-size/4);
}
}
@mixin valo-textarea ($primary-stylename: v-textarea) {
-
+
.#{$primary-stylename} {
@include valo-textarea-style;
width: $v-default-field-width;
@include valo-textfield-readonly-style;
}
+ .#{$primary-stylename}-error {
+ @include valo-textfield-error-style;
+ }
+
}
-@mixin valo-textarea-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
- $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
- $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
- $background-color: $v-textfield-background-color) {
+@mixin valo-textarea-style (
+ $unit-size : $v-unit-size,
+ $padding : round($v-unit-size/6), // Computed by default
+
+ $font-color : null, // Computed by default
+ $font-weight : max(400, $v-font-weight), // Inherited by default
+ $font-size : null, // Inherited by default
+
+ $background-color : $v-textfield-background-color,
+ $border : $v-textfield-border,
+ $border-radius : $v-textfield-border-radius,
- $unit-size: $unit-size or $v-unit-size;
+ $bevel : $v-textfield-bevel,
+ $shadow : $v-textfield-shadow,
- @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
- $shadow-style: $shadow-style, $shadow-depth: $shadow-depth,
- $unit-size: $unit-size, $border-radius: $border-radius,
- $background-color: $background-color);
- display: block; // Fixes extra white-space under the textarea element
+ $states : (normal, focus, disabled)
+ ) {
+
+ @include valo-textfield-style($unit-size: $unit-size, $padding: $padding,
+ $font-color: $font-color,
+ $font-weight: $font-weight, // Inherited by default
+ $font-size: $font-size, // Inherited by default
+
+ $background-color: $background-color,
+ $border: $border,
+ $border-radius: $border-radius,
+
+ $bevel: $bevel,
+ $shadow: $shadow,
+
+ $states: $states);
+ //display: block; // Fixes extra white-space under the textarea element
height: auto;
resize: none;
-}
\ No newline at end of file
+}
-$v-textfield-bevel-style: inset 0 1px 0 v-shade, 0 1px 0 v-hilite !default;
-$v-textfield-bevel-depth: $v-bevel-depth !default;
-$v-textfield-shadow-style: none !default;
-$v-textfield-shadow-depth: $v-shadow-depth !default;
-$v-textfield-background-color: null !default;
-$v-textfield-unit-size: null !default;
+$v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default;
+$v-textfield-bevel: inset 0 1px 0 v-shade !default;
+$v-textfield-shadow: 0 1px 0 (v-tint 2) !default;
$v-textfield-font-weight: 400 !default;
-$v-textfield-font-size: $v-font-size !default;
-$v-textfield-border-width: $v-border-width !default;
+$v-textfield-border: $v-border !default;
$v-textfield-border-radius: $v-border-radius !default;
$v-textfield-disabled-opacity: $v-disabled-opacity !default;
-@function valo-textfield-background-color ($context) {
- $bg-color: lighten($context, 8%);
- @if is-dark-color($context) {
- $bg-color: darken($context, 4%);
- }
- @return $bg-color;
-}
-@function valo-textfield-box-shadow ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
- $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) {
- @if $bevel-depth == 0 and $shadow-depth == 0 {
- @return null;
- }
- $_bevel: valo-replace-hilite-and-shade($bevel-style, white($bevel-depth/500%), black($bevel-depth/500%));
- $_shadow: valo-shadow($shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
-
- @if $_bevel and $_shadow {
- @return $_bevel, $_shadow;
- } @else if $_bevel {
- @return $_bevel;
- } @else if $_shadow {
- @return $_shadow;
- } @else {
- @return null;
- }
+@mixin valo-textfield-style (
+ $unit-size : $v-unit-size,
+ $padding : null, // Computed by default
-}
+ $font-color : null, // Computed by default
+ $font-weight : max(400, $v-font-weight),
+ $font-size : null, // Inherited by default
+ $background-color : $v-textfield-background-color,
+ $border : $v-textfield-border,
+ $border-radius : $v-textfield-border-radius,
+ $gradient : none,
+ $bevel : $v-textfield-bevel,
+ $shadow : $v-textfield-shadow,
+ $states : (normal, focus, disabled)
+ ) {
-@mixin valo-textfield-size ($unit-size: $v-unit-size, $border-radius: $v-textfield-border-radius) {
- height: $unit-size;
- $padding-width: ceil($unit-size/6);
- @if $border-radius {
- $padding-width: $padding-width + ceil($border-radius/3);
- }
- padding: ceil($unit-size/9) $padding-width;
-}
+ @if contains($states, normal) {
+ @include appearance(none);
+ margin: 0;
+ font: inherit;
+ font-size: $font-size;
+ font-weight: $font-weight;
+ line-height: normal;
+ height: $unit-size;
+ border-radius: $border-radius;
+ @if type-of($padding) == number or type-of($padding) == list {
+ padding: $padding;
+ } @else {
+ $padding-width: ceil($unit-size/6);
+ @if $border-radius {
+ $padding-width: $padding-width + ceil($border-radius/3);
+ }
+ $padding-height: round($unit-size/9);
-@function valo-textfield-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
- $background-color: $v-textfield-background-color) {
- $background-color: $background-color or valo-textfield-background-color($v-background-color);
- $border-color: if(color-luminance($background-color) < color-luminance($v-background-color), $background-color, $v-background-color);
- $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2)));
- $border-color: scale-color($border-color, $saturation: -$bevel-depth/2);
- @return $border-color;
-}
-
+ padding: $padding-height $padding-width;
+ // Go ask Mozilla why text alignment in text inputs is so wonky
+ .v-ff & {
+ // padding-top: $padding-height - 2px;
+ // padding-bottom: 0;
+ }
+ }
+ @if $background-color and $border {
+ border: valo-border($border, darker-of($background-color, $v-app-background-color));
+ }
-@mixin valo-textfield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
- $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
- $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
- $background-color: $v-textfield-background-color) {
+ @if $gradient == none {
+ background: $background-color;
+ } @else if $gradient {
+ @include valo-gradient($color: $background-color, $gradient: $gradient)
+ }
- $background-color: $background-color or valo-textfield-background-color($v-background-color);
- $unit-size: $unit-size or $v-unit-size;
-
- @include appearance(none);
- margin: 0;
- font: inherit;
- font-size: if($v-textfield-font-size != $v-font-size, $v-textfield-font-size, null);
- font-weight: $v-textfield-font-weight;
- @include valo-textfield-size($unit-size, $border-radius);
- border-radius: $border-radius;
- border: $v-textfield-border-width solid valo-textfield-border-color($bevel-style, $bevel-depth, $background-color);
- background: $background-color;
- color: valo-font-color($background-color);
- box-shadow: valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
+ color: valo-font-color($background-color);
+ box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient);
- @if $v-animations-enabled {
- @include transition(box-shadow 180ms, border 180ms);
+ @if $v-animations-enabled {
+ @include transition(box-shadow 180ms, border 180ms);
+ }
}
- &.v-disabled {
- @include opacity($v-textfield-disabled-opacity);
+ @if contains($states, disabled) {
+ &.v-disabled {
+ @include opacity($v-textfield-disabled-opacity);
+ }
}
- &:focus {
- @include valo-textfield-focus-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
+ @if contains($states, focus) {
+ &:focus {
+ @include valo-textfield-focus-style($bevel: $bevel, $shadow: $shadow, $gradient: $gradient, $background-color: $background-color);
+ }
}
-
+
// TODO allow parent selector to be used in interpolation
&.v-textfield-prompt,
&.v-textarea-prompt {
}
-@mixin valo-textfield-prompt-style ($background-color) {
- $font-color: valo-font-color($background-color);
- $font-color: mix($background-color, $font-color);
- @if is-dark-color($background-color) and saturation($background-color) > 50% {
- $font-color: scale-color($font-color, $lightness: 20%);
+@mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) {
+ @if type-of($background-color) == color {
+ $font-color: valo-font-color($background-color);
+ $font-color: mix($background-color, $font-color);
+ @if is-dark-color($background-color) and saturation($background-color) > 50% {
+ $font-color: scale-color($font-color, $lightness: 20%);
+ }
+ $font-color: scale-color($font-color, $saturation: saturation($font-color));
+ color: $font-color;
}
- $font-color: scale-color($font-color, $saturation: saturation($font-color));
- color: $font-color;
}
-@mixin valo-textfield-focus-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
- $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) {
+@mixin valo-textfield-focus-style ($bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $background-color: $v-textfield-background-color, $gradient: null) {
outline: none;
@if $v-animations-enabled {
@include transition(none);
- }
-
+ }
+
$focus-color: valo-focus-color();
-
+
@if color-luminance($focus-color) + 50 < color-luminance($v-background-color) {
border-color: $focus-color;
}
-
- box-shadow: valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth),
- valo-focus-box-shadow($color: $focus-color);
+
+ box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient, $include-focus: true);
+
+ @include valo-focus-style;
}
background: transparent;
box-shadow: none;
&:focus {
- box-shadow: valo-focus-box-shadow();
+ @include valo-focus-style($include-box-shadow: true);
}
}
@mixin valo-textfield ($primary-stylename: v-textfield) {
-
+
.#{$primary-stylename} {
@include valo-textfield-style;
width: $v-default-field-width;
}
-
+
.#{$primary-stylename}-readonly {
@include valo-textfield-readonly-style;
}
-
+
+ .#{$primary-stylename}-error {
+ @include valo-textfield-error-style;
+ }
+
}
-@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-textfield-font-size, $image-icon-size: 16px) {
+
+@mixin valo-textfield-error-style {
+ border-color: $v-error-indicator-color;
+ $bg: scale-color($v-error-indicator-color, $lightness: 98%);
+ background: $bg;
+ color: valo-font-color($bg);
+}
+
+
+
+@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) {
.v-slot-#{$stylename} {
position: relative;
}
// Font icons
span.v-icon {
- left: $v-textfield-border-width;
- bottom: $v-textfield-border-width;
+ $border-width: first-number($v-textfield-border);
+ left: $border-width;
+ bottom: $border-width;
width: $unit-size;
- line-height: $unit-size - $v-textfield-border-width*2;
+ line-height: $unit-size - $border-width*2;
text-align: center;
font-size: $font-size;
}
@mixin valo-tree ($primary-stylename: v-tree) {
-
+
.#{$primary-stylename} {
position: relative;
white-space: nowrap;
- @include user-select(none);;
-
+ @include user-select(none);
+
&:focus {
outline: none;
}
}
-
+
.#{$primary-stylename}-node {
&:before {
content: "";
content: "+";
position: static;
margin-left: -1.9em;
- //background: red;
vertical-align: top;
@include valo-tree-collapsed-icon-style;
text-align: center;
padding-left: 1.9em;
}
}
-
+
.#{$primary-stylename}-node-caption {
height: $v-tree-row-height;
line-height: $v-tree-row-height - 1px;
overflow: hidden;
white-space: nowrap;
-
+
& > div {
display: inline-block;
width: 100%;
}
}
}
-
+
span {
padding-right: $v-tree-row-height;
cursor: pointer;
display: inline-block;
}
}
-
+
.#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-caption > div:before {
@include valo-tree-expanded-icon-style;
@include valo-tree-expanded-icon-style(true);
}
-
+ .#{$primary-stylename}-node-leaf > .#{$primary-stylename}-node-caption > div:before,
+ .v-ie8 & .#{$primary-stylename}-node-leaf:before {
+ visibility: hidden;
+ }
.#{$primary-stylename}-node-focused {
// This a v-tree-node-caption element
opacity: 1;
border: 1px solid valo-focus-color();
}
+
+ .v-ie8 & {
+ outline: 1px dotted $v-focus-color;
+ }
}
-
-
-
+
+
+
.#{$primary-stylename}-node-selected {
- color: valo-font-color(valo-selection-color(), 0.9);
- text-shadow: valo-button-text-shadow(valo-selection-color(), $v-bevel-depth);
+ color: valo-font-color($v-selection-color, 0.9);
+ text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth);
&:after {
opacity: 1;
- @include valo-gradient(valo-selection-color());
+ @include valo-gradient($v-selection-color);
border: none;
.v-ie8 & {
}
.v-ie8 & {
- @include valo-gradient(valo-selection-color());
+ @include valo-gradient($v-selection-color);
}
}
-
+
.#{$primary-stylename}-node-children {
padding-left: round($v-unit-size/2);
@mixin valo-twincolselect ($primary-stylename: v-select-twincol) {
-
+
.#{$primary-stylename} {
white-space: normal;
-
+
select {
@include valo-nativeselect-select-style;
}
- &:not(.v-has-width) {
- width: auto !important;
- }
-
.v-textfield,
.v-nativebutton {
width: auto !important;
.#{$primary-stylename}-caption-right {
@include valo-caption-style;
}
-
+
.#{$primary-stylename}-buttons {
white-space: nowrap;
display: inline-block;
position: absolute;
left: round($v-unit-size/4);
right: round($v-unit-size/4);
- top: $v-unit-size - $v-button-border-width;
+ top: $v-unit-size - first-number($v-border);
padding: 0;
text-align: center;
z-index: 1;
}
- @if $v-button-border-radius > 0 {
+ @if $v-border-radius > 0 {
.v-button:first-child {
- border-radius: $v-button-border-radius $v-button-border-radius 0 0;
+ border-radius: $v-border-radius $v-border-radius 0 0;
}
.v-button:last-child {
- border-radius: 0 0 $v-button-border-radius $v-button-border-radius;
+ border-radius: 0 0 $v-border-radius $v-border-radius;
}
}
@include valo-twincolselect-add-icon-style;
}
}
-
+
}
+$v-window-background-color: $v-panel-background-color !default;
$v-window-border-radius: null !default;
-$v-window-shadow-style: 0 4px 12px 6px rgba(0,0,0, $v-shadow-depth/100%), $v-overlay-shadow-style !default;
+$v-window-shadow: 0 4px 12px 6px rgba(0,0,0, $v-shadow-opacity/100%), $v-overlay-shadow !default;
$v-window-open-animation: null !default;
$v-window-animations-enabled: $v-animations-enabled !default;
@mixin valo-window ($primary-stylename: v-window) {
.#{$primary-stylename} {
- @include valo-overlay-style;
+ @include valo-overlay-style($background-color: $v-window-background-color);
@if $v-window-animations-enabled and $v-window-open-animation {
@include animation($v-window-open-animation);
}
- @if $v-window-shadow-style {
- @if $v-window-shadow-style == none {
+ @if $v-window-shadow {
+ @if $v-window-shadow == none {
box-shadow: none;
- } @else {
- box-shadow: valo-shadow($shadow-style: $v-window-shadow-style);
+ } @else if $v-window-shadow != $v-overlay-shadow {
+ box-shadow: valo-bevel-and-shadow($shadow: $v-window-shadow);
}
}
border-radius: $v-window-border-radius;
+ //border: first-number($v-border) solid valo-panel-border-color();
padding: 0;
min-width: 4*$v-unit-size !important;
min-height: $v-unit-size !important;
right: 0;
bottom: 0;
left: 0;
- background: $v-background-color;
- @include opacity(.3);
+ background: $v-app-background-color;
+ @include opacity(.5);
}
.#{$primary-stylename}-draggingCurtain {
position: fixed !important;
}
-
+
.#{$primary-stylename}-resizingCurtain + .v-window,
.#{$primary-stylename}-draggingCurtain + .v-window {
@include transition(none);
}
+ $scroll-divider-width: max(1px, first-number($v-border));
+
.#{$primary-stylename}-outerheader {
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
- //height: $v-unit-size - 1px;
// Raise above the window content, if that is ever promoted to a layer
@include transform(translatez(0));
&:after {
content: "";
position: absolute;
- bottom: -1px;
+ bottom: -$scroll-divider-width;
right: 0;
left: 0;
- height: 1px;
- $_bg: valo-overlay-background-color();
- background: adjust-color($_bg, $lightness: if(is-dark-color($_bg), 3%, -5%), $saturation: -10%);
+ height: $scroll-divider-width;
+ $_bg: $v-window-background-color;
+ background: first-color(valo-border($strength: 0.5));
}
}
.#{$primary-stylename}-header {
- @include user-select(none);;
+ @include user-select(none);
cursor: move;
line-height: $v-unit-size - 1px;
padding-left: round($v-unit-size/3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- color: blend-normal(rgba(valo-font-color(valo-overlay-background-color()), .7), valo-overlay-background-color());
+ color: blend-normal(rgba(valo-font-color($v-window-background-color), .7), $v-window-background-color);
}
-
+
.#{$primary-stylename}-closebox,
.#{$primary-stylename}-maximizebox,
.#{$primary-stylename}-restorebox {
@if $v-animations-enabled {
@include transition(all 140ms);
}
-
+
&:focus {
outline: none;
}
-
+
&:hover {
@include opacity(1);
- color: valo-selection-color();
+ color: $v-selection-color;
}
-
+
&:active {
color: inherit;
}
}
-
+
.#{$primary-stylename}-closebox {
@include valo-window-close-icon-style;
}
-
+
.#{$primary-stylename}-maximizebox,
.#{$primary-stylename}-restorebox {
right: $v-unit-size;
.#{$primary-stylename}-maximizebox {
@include valo-window-maximize-icon-style;
}
-
+
.#{$primary-stylename}-restorebox {
@include valo-window-restore-icon-style;
}
-
+
.v-window > .popupContent,
.#{$primary-stylename}-wrap,
.#{$primary-stylename}-contents,
.#{$primary-stylename}-contents > .v-scrollable {
height: 100%;
}
-
+
.#{$primary-stylename}-contents {
@include box-sizing(border-box);
border-radius: $v-border-radius;
position: absolute;
z-index: 2;
top: 0;
- height: 1px;
- background: valo-overlay-background-color();
+ height: $scroll-divider-width;
+ background: $v-window-background-color;
left: 0;
right: 0;
}
+
+ .v-panel-captionwrap:after {
+ background: first-color(valo-border($strength: 0.5));
+ }
+
+ .v-panel-content:before {
+ background: $v-window-background-color;
+ }
}
}
.#{$primary-stylename}-bottom-toolbar {
padding: round($v-unit-size/5) round($v-unit-size/3);
- background: $v-background-color;
+ @include linear-gradient(to bottom, darken($v-background-color, valo-gradient-opacity($v-gradient)/2) 0, $v-background-color round($v-unit-size/10), $fallback: $v-background-color);
+ border-top: valo-border($strength: 0.5);
.v-expand {
overflow: visible;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
text-align: center;
- @include user-select(none);;
- cursor: default;
+ @include user-select(none);
}
}
// Include directly to avoid trapping inside a parent selector
// TODO move inside the theme main mixin once we can use Sass 3.3 (@at-root)
-@include valo-fonts;
\ No newline at end of file
+@include valo-fonts;
// Common styles for components
-// About 40KB of CSS output
+// About 50KB of CSS output
+
+@import "valo-menu";
@mixin valo-common-stylenames {
- $v-scaling-factor--small: 0.8 !default;
- $v-scaling-factor--large: 1.2 !default;
-
- $v-unit-size--small: ceil($v-unit-size * $v-scaling-factor--small);
- $v-unit-size--large: ceil($v-unit-size * $v-scaling-factor--large);
+ $v-scaling-factor--small: 0.8 !default;
+ $v-scaling-factor--large: 1.2 !default;
+
+ $v-unit-size--small: ceil($v-unit-size * $v-scaling-factor--small);
+ $v-unit-size--large: ceil($v-unit-size * $v-scaling-factor--large);
+
+ $v-font-size--small: ceil($v-font-size * $v-scaling-factor--small);
+ $v-font-size--large: ceil($v-font-size * $v-scaling-factor--large);
+
+ $v-friendly-color: #2c9720;
+
+
+ .v-button-primary {
+ @include valo-button-style($background-color: $v-selection-color);
+ $padding-width: round($v-unit-size/2);
+ padding: 0 $padding-width;
+ font-weight: bold;
+ $min-width: round($v-unit-size * 2.2);
+ min-width: $min-width;
+
+ // IE8 + border-box + min-width == fail
+ .v-ie8 & {
+ min-width: $min-width - $padding-width*2;
+ }
+ }
+
+ .v-button-friendly {
+ @include valo-button-style($background-color: $v-friendly-color);
+ }
+
+ .v-button-danger {
+ @include valo-button-style($background-color: $v-error-indicator-color);
+ }
+
+ .v-button-borderless {
+ @include valo-button-borderless-style;
+ }
+
+ .v-button-link {
+ @include valo-button-borderless-style;
+ @include valo-link-style;
+ }
+
+ .v-button-small {
+ @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null);
+ }
+
+ .v-button-large {
+ @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null);
+ }
+
+ .v-button-icon-align-right {
+ @include valo-button-icon-align-right-style;
+ }
+
+ .v-button-icon-only {
+ width: $v-unit-size;
+ padding: 0;
+
+ &.v-button-small {
+ width: $v-unit-size--small;
+ }
+ }
+
+ .v-link-small {
+ font-size: $v-font-size--small;
+ }
- $v-font-size--small: ceil($v-font-size * $v-scaling-factor--small);
- $v-font-size--large: ceil($v-font-size * $v-scaling-factor--large);
+ .v-link-large {
+ font-size: $v-font-size--large;
+ }
+ .v-tabsheet-centered-tabs {
+ @include valo-tabsheet-centered-tabs;
+ }
- .v-button-primary {
- @include valo-button-style($background-color: valo-selection-color());
- padding: 0 round($v-unit-size/1.4);
- font-weight: bold;
- }
+ .v-tabsheet-equal-width-tabs {
+ @include valo-tabsheet-equal-width-tabs($flex: false);
+ }
- .v-button-friendly {
- @include valo-button-style($background-color: #2c9720);
- }
+ .v-tabsheet-padded-tabbar {
+ @include valo-tabsheet-padded-tabbar;
+ }
- .v-button-danger {
- @include valo-button-style($background-color: $v-error-indicator-color);
- }
+ .v-tabsheet-icons-on-top {
+ @include valo-tabsheet-icons-on-top;
+ }
- .v-button-borderless {
- @include valo-button-borderless-style;
- }
+ .v-panel-borderless {
+ @include valo-panel-borderless-style;
+ }
- .v-button-link {
- @include valo-button-borderless-style;
- @include valo-link-style;
- }
+ .v-formlayout.light {
+ @include valo-formlayout-light-style;
+ }
+
+ .v-textfield-borderless,
+ .v-textarea-borderless {
+ @include valo-textfield-borderless-style;
+ }
- .v-button-small {
- @include valo-button-style($unit-size: $v-unit-size--small);
- font-size: $v-font-size--small;
- }
+ .v-textfield-small {
+ @include valo-textfield-style($unit-size: $v-unit-size--small);
+ font-size: $v-font-size--small;
+ }
- .v-button-large {
- @include valo-button-style($unit-size: $v-unit-size--large);
- font-size: $v-font-size--large;
- }
-
- .v-button-icon-align-right {
- @include valo-button-icon-align-right-style;
- }
+ .v-textfield-large {
+ @include valo-textfield-style($unit-size: $v-unit-size--large);
+ font-size: $v-font-size--large;
+ }
- .v-tabsheet-centered-tabs {
- @include valo-tabsheet-centered-tabs;
- }
+ @include valo-textfield-inline-icon($stylename: inline-icon);
- .v-tabsheet-equal-width-tabs {
- @include valo-tabsheet-equal-width-tabs($flex: false);
- }
+ .v-textarea-small {
+ @include valo-textarea-style($unit-size: $v-unit-size--small);
+ font-size: $v-font-size--small;
+ }
- .v-tabsheet-icons-on-top {
- @include valo-tabsheet-icons-on-top;
- }
+ .v-textarea-large {
+ @include valo-textarea-style($unit-size: $v-unit-size--large);
+ font-size: $v-font-size--large;
+ }
- .v-panel-borderless {
- @include valo-panel-borderless-style;
- }
+ .v-textfield-align-right,
+ .v-textarea-align-right {
+ text-align: right;
+ }
- .v-formlayout.light {
- @include valo-formlayout-light-style;
- }
+ .v-textfield-align-center,
+ .v-textarea-align-center {
+ text-align: center;
+ }
- .v-textfield-borderless,
- .v-textarea-borderless {
- @include valo-textfield-borderless-style;
- }
+ .v-filterselect-small {
+ @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null);
+ font-size: $v-font-size--small;
+ }
- .v-textfield-small {
- @include valo-textfield-style($unit-size: $v-unit-size--small);
- font-size: $v-font-size--small;
- }
+ .v-filterselect-large {
+ @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null);
+ font-size: $v-font-size--large;
+ }
- .v-textfield-large {
- @include valo-textfield-style($unit-size: $v-unit-size--large);
- font-size: $v-font-size--large;
- }
+ .v-datefield-small {
+ @include valo-datefield-style($unit-size: $v-unit-size--small);
+ font-size: $v-font-size--small;
+ }
- @include valo-textfield-inline-icon($stylename: inline-icon);
+ .v-datefield-large {
+ @include valo-datefield-style($unit-size: $v-unit-size--large);
+ font-size: $v-font-size--large;
+ }
- .v-textarea-small {
- @include valo-textarea-style($unit-size: $v-unit-size--small);
- font-size: $v-font-size--small;
- }
+ .v-checkbox-small {
+ @include valo-checkbox-style($size: $v-unit-size--small);
+ font-size: $v-font-size--small;
+ }
- .v-textarea-large {
- @include valo-textarea-style($unit-size: $v-unit-size--large);
- font-size: $v-font-size--large;
- }
+ .v-checkbox-large {
+ @include valo-checkbox-style($size: $v-unit-size--large);
+ font-size: $v-font-size--large;
+ }
- .v-filterselect-small {
- @include valo-combobox-style($unit-size: $v-unit-size--small);
- font-size: $v-font-size--small;
- }
+ .v-label-spinner {
+ @include valo-spinner;
+ }
- .v-filterselect-large {
- @include valo-combobox-style($unit-size: $v-unit-size--large);
- font-size: $v-font-size--large;
- }
-
- .v-datefield-small {
- @include valo-datefield-style($unit-size: $v-unit-size--small);
- }
-
- .v-datefield-large {
- @include valo-datefield-style($unit-size: $v-unit-size--large);
- }
-
- .v-checkbox-small {
- @include valo-checkbox-style($unit-size: $v-unit-size--small);
- }
-
- .v-checkbox-large {
- @include valo-checkbox-style($unit-size: $v-unit-size--large);
- }
-
- .v-label-spinner {
- @include valo-spinner;
- }
-
- .v-panel-well {
- @include valo-panel-well-style;
- }
-
- .v-panel-borderless {
- @include valo-panel-borderless-style;
- }
-
- .v-csslayout-well {
- @include valo-panel-well-style;
- @include valo-panel-adjust-content-margins;
- }
+ .v-panel-well {
+ @include valo-panel-well-style;
+ }
- .v-csslayout-card {
- @include valo-panel-style;
- @include valo-panel-adjust-content-margins;
- }
+ .v-panel-borderless {
+ @include valo-panel-borderless-style;
+ }
- @include valo-splitpanel-small($stylename: small);
-
- @include valo-component-group;
+ .v-panel-scroll-divider {
+ @include valo-panel-scroll-divider-style;
+ }
- .wrapping {
+ .v-csslayout-well {
+ @include valo-panel-well-style;
+ @include valo-panel-adjust-content-margins;
+ }
+
+ .v-csslayout-card {
+ @include valo-panel-style;
+ @include valo-panel-adjust-content-margins;
+ }
+
+ .v-splitpanel-horizontal.large,
+ .v-splitpanel-vertical.large {
+ @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true);
+ }
+
+ .v-menubar-small {
+ @include valo-menubar-small-style($unit-size: $v-unit-size--small);
+ font-size: $v-font-size--small;
+ }
+
+ .v-menubar-borderless {
+ @include valo-menubar-borderless-style;
+ }
+
+ @include valo-component-group;
+
+ .wrapping {
@include valo-horizontallayout--wrapping;
}
+ .v-Notification.success,
+ .v-Notification.failure {
+ background: #fff;
+ color: #555;
+ border: 2px solid $v-friendly-color;
+
+ h1 {
+ color: $v-friendly-color;
+ font-weight: $v-font-weight + 100;
+
+ &:before {
+ font-family: FontAwesome;
+ content: "\f00c";
+ margin-right: .5em;
+ }
+ }
+
+ &.bar {
+ margin: -2px !important;
+ }
+ }
+
+ .v-Notification.failure {
+ border-color: $v-error-indicator-color;
+
+ h1 {
+ color: $v-error-indicator-color;
+
+ &:before {
+ content: "\f05e";
+ }
+ }
+ }
+
+ .v-label-success,
+ .v-label-failure {
+ background: #fff;
+ color: #555;
+ border: 2px solid $v-friendly-color;
+ border-radius: $v-border-radius;
+ padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
+ font-weight: $v-font-weight + 100;
+ font-size: round($v-font-size * 0.95);
+
+ &:before {
+ font-family: FontAwesome;
+ content: "\f00c";
+ margin-right: .5em;
+ margin-left: round($v-unit-size/-2);
+ color: $v-friendly-color;
+ }
+ }
+
+ .v-label-failure {
+ border-color: $v-error-indicator-color;
+
+ &:before {
+ content: "\f05e";
+ color: $v-error-indicator-color;
+ }
+ }
+
+
+ .v-panel-caption.v-horizontallayout {
+ height: auto !important;
+ line-height: 0;
+
+ .v-slot {
+ vertical-align: middle;
+ }
+
+ .v-label {
+ line-height: $v-unit-size;
+ }
+ }
+
+
+ .v-select-optiongroup-horizontal {
+ @include valo-optiongroup-horizontal;
+ }
+
+
+ .v-table-no-stripes {
+ @include valo-table-no-stripes;
+ }
+
+ .v-table-no-vertical-lines {
+ @include valo-table-no-vertical-lines;
+ }
+
+ .v-table-no-horizontal-lines {
+ @include valo-table-no-horizontal-lines;
+ }
+
+ .v-table-no-header {
+ @include valo-table-no-header;
+ }
+
+ .v-table-borderless {
+ @include valo-table-borderless;
+ }
+
+ .v-table-compact,
+ .v-table-small {
+ @include valo-table-compact-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
+ }
+
+ .v-table-small {
+ font-size: $v-font-size--small;
+ }
+
+
+ .v-accordion-borderless {
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+
+ > .v-accordion-item {
+ border-radius: 0;
+ }
+ }
+
+
+ @include valo-menu;
+
}
--- /dev/null
+$valo-menu-background-color: null !default;
+
+@mixin valo-menu {
+
+ $bg-lightness: if(color-luminance($v-app-background-color) < 10, 10%, -60%);
+ $bg: $valo-menu-background-color or scale-color($v-app-background-color, $lightness: $bg-lightness);
+
+ .v-slot-valo-menu {
+ position: fixed;
+ }
+
+ .valo-menu {
+ position: fixed;
+ height: 100%;
+ overflow: auto;
+ padding-bottom: $v-unit-size;
+ @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
+ color: valo-font-color($bg);
+ font-size: round($v-font-size * 0.9);
+ line-height: round($v-unit-size * 0.8);
+ border-right: valo-border($color: $bg);
+
+ .valo-menu-title,
+ .valo-menu-subtitle,
+ .valo-menu-item {
+ display: block;
+ line-height: inherit;
+ }
+
+ .valo-menu-title {
+ line-height: 1.2;
+ @include valo-gradient($color: $v-selection-color);
+ $font-color: valo-font-color($v-selection-color, 1);
+ color: $font-color;
+ text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
+ padding: round($v-unit-size/3) round($v-unit-size/2);
+ font-size: 0.9em;
+ border-bottom: valo-border($color: $v-selection-color);
+ box-shadow: valo-bevel-and-shadow($shadow: $v-shadow);
+
+ .v-menubar {
+ background: transparent;
+ border-color: first-color(valo-border($color: $v-selection-color));
+ color: inherit;
+ box-shadow: none;
+ text-shadow: inherit;
+ }
+
+ .v-menubar-menuitem {
+ background: transparent;
+ box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient);
+ text-shadow: inherit;
+ font-size: $v-font-size;
+ border-color: inherit;
+ }
+ }
+
+ .valo-menu-subtitle {
+ color: valo-font-color($bg, 0.5);
+ margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
+ border-bottom: valo-border($color: $bg, $strength: 0.5);
+ position: relative;
+
+ .badge {
+ position: absolute;
+ right: round($v-unit-size/2);
+ color: mix(valo-font-color($bg),$v-selection-color);
+ }
+ }
+
+ .valo-menu-item {
+ outline: none;
+ font-weight: $v-font-weight + 100;
+ padding: 0 round($v-unit-size) 0 round($v-unit-size/2);
+ cursor: pointer;
+ position: relative;
+
+ &:before {
+ content: "";
+ $diff: color-luminance($bg) - color-luminance($v-selection-color);
+ @if abs($diff) < 30 {
+ background: lighten($v-selection-color, 10%);
+ } @else {
+ background: $v-selection-color;
+ }
+ position: absolute;
+ left: 0;
+ height: 100%;
+ width: 0;
+ border-radius: 0 $v-border-radius $v-border-radius 0;
+ @include transition(width 300ms);
+ }
+
+ &:hover,
+ &.selected {
+ color: valo-font-color($bg, 1);
+ }
+
+ &.selected:before {
+ width: round($v-unit-size/8);
+ }
+ }
+ }
+
+}
@mixin valo-contextmenu {
-
+
.v-contextmenu {
@include valo-selection-overlay-style;
+
+ table {
+ border-spacing: 0;
+ }
}
-
+
.v-contextmenu .gwt-MenuItem {
@include valo-selection-item-style;
}
-
+
.v-contextmenu .gwt-MenuItem-selected {
@include valo-selection-item-selected-style;
}
-
-}
\ No newline at end of file
+
+}
overflow: hidden;
}
+ .v-icon {
+ cursor: inherit;
+ }
+
.v-icon,
.v-errorindicator,
.v-required-field-indicator {
line-height: inherit;
}
- .v-caption,
- .v-captiontext {
+ .v-caption {
display: inline-block;
+ white-space: nowrap;
line-height: $v-line-height;
}
+ .v-captiontext {
+ display: inline-block;
+ line-height: inherit;
+ }
+
// Component global styles should also be included here
- @include valo-orderedlayout-global;
- @include valo-gridlayout-global;
- @include valo-calendar-global;
- @include valo-colorpicker-global;
- @include valo-table-global;
- @include valo-tabsheet-global;
+ @if v-is-included(orderedlayout) {
+ @include valo-orderedlayout-global;
+ }
+
+ @if v-is-included(gridlayout) {
+ @include valo-gridlayout-global;
+ }
+
+ @if v-is-included(calendar) {
+ @include valo-calendar-global;
+ }
+
+ @if v-is-included(colorpicker) {
+ @include valo-colorpicker-global;
+ }
+
+ @if v-is-included(table) or v-is-included(treetable) {
+ @include valo-table-global;
+ }
+
+ @if v-is-included(tabsheet) {
+ @include valo-tabsheet-global;
+ }
+
+ @if v-is-included(splitpanel) {
+ @include valo-splitpanel-global;
+ }
$valo-global-included: true;
}
outline: none;
}
- //.v-captiontext,
- //.v-errorindicator,
- //.v-required-field-indicator,
img.v-icon {
vertical-align: middle;
}
.v-generated-body {
height: auto;
overflow: auto;
+ background-color: $v-app-background-color;
}
.v-app,
overflow: visible !important;
}
- // Reposition loading indicator so that it doens't scroll with the page
- .v-loading-indicator {
- position: fixed !important;
- }
-
- .v-overlay-container {
- position: absolute;
- top: 0;
- left: 0;
- }
-
- // Reposition notifications so that they don't scroll with the page
- .v-Notification {
- position: fixed !important;
- }
-
}
+
+
+$v-loading-indicator-color: valo-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;
+
+
+
@include keyframes(v-progress-start) {
0% { width: 0%; }
100% { width: 50%; }
}
@include keyframes(v-progress-wait) {
- 0% { width: 90%; }
- 100% { width: 96%; }
+ 0% { width: 90%; height: $v-loading-indicator-bar-height; }
+ 3% { width: 91%; height: $v-loading-indicator-bar-height--wait; }
+ 100% { width: 96%; height: $v-loading-indicator-bar-height--wait; }
}
@include keyframes(v-progress-wait-pulse) {
}
-$v-loading-indicator-color: valo-focus-color() !default;
-$v-loading-indicator-bar-height: ceil($v-unit-size/7) !default;
@mixin valo-loading-bar {
-
+
.v-loading-indicator {
position: fixed !important;
z-index: 99999;
background-color: $v-loading-indicator-color;
//@include linear-gradient(to right, rgba($v-loading-indicator-color,0) 0%, $v-loading-indicator-color 100%);
pointer-events: none;
-
+
@include transition(none);
@include animation(v-progress-start 1000ms 200ms both);
//@include animation-fill-mode(forwards);
-
+
&[style*="none"] {
// Chrome skips the transitions because it thinks the element is display: none;
display: block !important;
@include transition(opacity 500ms 300ms, width 300ms);
}
}
-
+
.v-loading-indicator-delay {
width: 90%;
.v-ff & {
}
@include animation(v-progress-delay 3.8s forwards);
}
-
+
.v-loading-indicator-wait {
width: 96%;
.v-ff & {
}
@include animation(v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards);
}
-
-}
\ No newline at end of file
+
+}
+$v-notification-title-color: $v-focus-color !default;
+
+
@mixin valo-notification {
}
// Can't match to "left: 0", since that would target "margin-left: 0" also, which all GWT PopupPanels have always
- .v-Notification[style*=" left: 0"]:not(.v-Notification-system) {
+ .v-Notification[style*=" left: 0"]:not(.v-Notification-system):not(.bar) {
@include valo-anim-slide-right(600ms);
}
}
border-radius: $v-border-radius;
text-align: center;
position: fixed !important;
-
+
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-
+
h1 {
margin: 0;
display: inline-block;
white-space: nowrap;
letter-spacing: 0;
}
-
+
p {
margin: 0;
display: inline-block;
max-width: 30em;
text-align: left;
}
-
+
h1 ~ p {
margin-left: round($v-font-size * 1.5);
}
-
+
.v-icon + h1 {
margin-left: round($v-font-size);
}
// System notification
.v-Notification-system {
- left: 0 !important;
- right: 0;
- max-width: 100%;
- margin: 0 !important;
- border-radius: 0;
-
+ @include valo-notification-bar-style;
@include valo-notification-system-style;
}
.v-Notification-system.v-Notification-system {
margin: 0 !important;
}
-
+
.v-Notification.tray {
text-align: left;
h1 {
- //display: block;
+ //display: block;
}
-
+
h1 + p {
display: block;
margin: .5em 0 0;
}
@include valo-notification-tray-style;
}
-
+
.v-Notification.warning {
@include valo-notification-warning-style;
}
-
+
.v-Notification.error {
@include valo-notification-error-style;
}
+ .v-Notification.bar {
+ @include valo-notification-bar-style;
+ }
+
.v-Notification.closable {
@include valo-notification-closable-style;
overflow: hidden !important; // Override GWT PopupPanel
cursor: pointer;
- //&:before {
- // content: "";
- // position: absolute;
- // top: 0;
- // right: 0;
- // bottom: 0;
- // width: $v-unit-size;
- // cursor: pointer;
- // background: #000;
- // @include opacity(.15);
- //}
-
&:after {
content: "\00d7";
font-size: 1.5em;
color: #000;
@include opacity(.5);
text-align: center;
- border: $v-border-width solid #000;
+ border: first-number($v-border) solid #000;
border-color: rgba(0,0,0,.3);
border-radius: 50%;
@include transition(opacity 200ms);
// Make thigns easier to read
&[style*="opacity: 0.9;"] {
- @include opacity(1, true);
+ @include opacity(1 !important);
}
-
+
h1 {
- color: valo-focus-color();
+ color: $v-notification-title-color;
font-size: round($v-font-size * 1.2);
line-height: 1;
}
}
}
+@mixin valo-notification-bar-style {
+ left: 0 !important;
+ right: 0;
+ max-width: 100%;
+ margin: 0 !important;
+ border-radius: 0;
+ box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
+ padding: round($v-unit-size/3) round($v-unit-size/2.5);
+
+ p {
+ max-width: 50em;
+ }
+}
+
@mixin valo-notification-system-style {
background-color: #444;
font-weight: $v-font-weight + 100;
line-height: round($v-font-size * 1.4);
- box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
h1 {
color: #fff;
p {
color: #e6e6e6;
- max-width: 50em;
}
// No need to underline the "click here" text, let's imply that the whole banner is clickable
+@function valo-overlay-background-color ($context: $v-background-color) {
+ @if is-dark-color($context) {
+ @return darken($context, 3%);
+ }
+ @return lighten($context, 2%);
+}
+
+
+$v-overlay-background-color: valo-overlay-background-color() !default;
$v-overlay-border-radius: $v-border-radius !default;
-$v-overlay-border-width: $v-border-width !default;
+$v-overlay-border-width: first-number($v-border) !default;
$v-overlay-open-animation: valo-overlay-open 200ms !default;
$v-overlay-padding: round($v-unit-size/9) !default;
$v-overlay-padding-vertical: $v-overlay-padding !default;
$v-overlay-padding-horizontal: $v-overlay-padding !default;
-$v-overlay-shadow-style: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade !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-selection-overlay-background-color: $v-overlay-background-color !default;
$v-selection-overlay-padding: $v-overlay-padding !default;
$v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default;
$v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default;
$v-selection-item-height: ceil($v-unit-size/1.4) !default;
$v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default;
$v-selection-item-font-weight: max(400, $v-font-weight);
-
-
-@function valo-overlay-background-color ($context: $v-background-color) {
- @if is-dark-color($context) {
- @return darken($context, 2%);
- }
- @return lighten($context, 2%);
-}
+$v-selection-item-selection-color: $v-selection-color !default;
$shadow-offset-x: nth($shadow, 1);
$shadow-offset-y: nth($shadow, 2);
$shadow-blur: nth($shadow, 3);
+ $shadow-spread: 0;
+ @if length($shadow) > 4 {
+ $shadow-spread: nth($shadow, 4);
+ }
$shadow-color: last($shadow);
- $shadow-color-opacity: opacity($shadow-color);
+ $shadow-color-opacity: round(opacity($shadow-color) * 100);
$shadow-color: opacify($shadow-color, 1);
position: absolute;
- top: $shadow-offset-y - $shadow-blur;
- right: -$shadow-offset-x + $shadow-blur;
- bottom: -$shadow-offset-y + $shadow-blur;
- left: $shadow-offset-x - $shadow-blur;
+ top: $shadow-offset-y - $shadow-blur - $shadow-spread;
+ right: -$shadow-offset-x + $shadow-blur - $shadow-spread;
+ bottom: -$shadow-offset-y + $shadow-blur - $shadow-spread;
+ left: $shadow-offset-x - $shadow-blur - $shadow-spread;
background: $shadow-color;
- filter: progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true, ShadowOpacity=#{$shadow-color-opacity});
+ filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true);
}
}
display: block;
// Border simulation
- .center {
+ /*.center {
position: absolute;
top: -$v-overlay-border-width;
right: -$v-overlay-border-width;
left: -$v-overlay-border-width;
background: darken(valo-overlay-background-color(), $v-bevel-depth);
filter: alpha(opacity=round($v-bevel-depth/1%));
- }
+ }*/
// Up to 8 shadows are supported
$elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right;
- $shadows: valo-shadow($shadow-style: $v-overlay-shadow-style);
+ $shadows: valo-bevel-and-shadow($shadow: $v-overlay-shadow);
@if type-of(last($shadows)) == color {
@include valo-ie8-shadow($shadows);
@for $i from 1 through min(length($elements), length($shadows)) {
$shadow: nth($shadows, $i);
@if length($shadow) == 2 {
- $shadow: last($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
+ $shadow: flatten-list($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
}
@if length($shadow) > 3 {
@include valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i));
-@function valo-overlay-box-shadow ($bg: null) {
- $bg: $bg or valo-overlay-background-color();
- @return valo-shadow($shadow-style: (0 0 0 $v-overlay-border-width rgba(darken($bg, $v-bevel-depth), $v-bevel-depth/100%), $v-overlay-shadow-style));
-}
-
-@mixin valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
+@mixin valo-overlay-style (
+ $background-color: $v-overlay-background-color,
+ $shadow: $v-overlay-shadow,
+ $open-animation: $v-overlay-open-animation
+ ) {
padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal;
border-radius: $v-overlay-border-radius;
-
- $bg: $background-color or valo-overlay-background-color();
- background: $bg;
- color: valo-font-color($bg);
- box-shadow: valo-overlay-box-shadow($bg);
+ background-color: $background-color;
+ color: valo-font-color($background-color);
+
+ box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $shadow);
@if $v-animations-enabled and $v-overlay-open-animation {
@include animation($open-animation);
}
-
+
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-@mixin valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
+@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $open-animation: $v-overlay-open-animation) {
@include valo-overlay-style($background-color: $background-color, $open-animation: $open-animation);
padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
}
right: 0;
bottom: 0;
left: 0;
- background: scale-color(valo-selection-color(), $lightness: -30%, $saturation: 50%);
+ background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: 50%);
@include opacity(.15);
pointer-events: none;
border-radius: inherit;
-@mixin valo-selection-item-selected-style ($parent-background-color: null) {
- $selection-color: valo-selection-color($parent-background-color);
- @include valo-gradient($selection-color);
- color: valo-font-color($selection-color, 0.9);
+@mixin valo-selection-item-selected-style {
+ @include valo-gradient($v-selection-item-selection-color);
+ color: valo-font-color($v-selection-item-selection-color, 0.9);
}
}
}
-@mixin valo-drag-element-style {
- background: #fff;
+@mixin valo-drag-element-style ($background-color: $v-app-background-color) {
+ background: $background-color;
+ color: valo-font-color($background-color);
box-shadow: 0 2px 10px rgba(#000, .2);
border-radius: $v-border-radius;
overflow: hidden;
// This has the unfortunate side-effect of selecting an the table row where the drag is dropped
//pointer-events: none;
-}
\ No newline at end of file
+}
// @category Tooltip
-$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .75) !default;
+$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .9) !default;
$v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default;
$v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default;
$v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default;
@import "../util/color";
-// List of components to include in the theme compilation. The list can be modified to make
+// 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);
-$v-included-components:
+$v-included-components:
absolutelayout,
accordion,
button,
gridlayout,
label,
link,
- loginform,
menubar,
nativebutton,
nativeselect,
+ notification,
optiongroup,
orderedlayout,
panel,
popupview,
- progressindicator,
+ progressbar,
slider,
splitpanel,
table,
window !default;
-// Checks if a given component is included in the compilation. Used by the collection mixins that
+// 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
// 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;
+$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;
+$v-line-height : 1.55 !default;
-$v-background-color: hsl(210, 0%, 98%) !default;
+$v-background-color : hsl(210, 0%, 98%) !default;
+$v-app-background-color : $v-background-color !default;
-$v-font-size: 16px !default; // Should be specified in pixels
-$v-font-weight: 300 !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold')
-$v-font-color: valo-font-color($v-background-color) !default;
-$v-font-family: "Open Sans", sans-serif !default;
+$v-font-size : 16px !default; // Should be specified in pixels
+$v-font-weight : 300 !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold')
+$v-font-color : valo-font-color($v-app-background-color) !default;
+$v-font-family : "Open Sans", sans-serif !default;
-$v-caption-font-size: round($v-font-size * 0.9) !default; // Should be a pixel value
-$v-caption-font-weight: max(400, $v-font-weight) !default;
+$v-caption-font-size : round($v-font-size * 0.9) !default; // Should be a pixel value
+$v-caption-font-weight : max(400, $v-font-weight) !default;
-$v-unit-size: round(2.3 * $v-font-size) !default; // Must be specified in pixels (suitable range 18-50)
+$v-unit-size : round(2.3 * $v-font-size) !default; // Must be specified in pixels (suitable range 18-50)
-$v-layout-margin-top: round($v-unit-size) !default;
-$v-layout-margin-right: round($v-unit-size) !default;
-$v-layout-margin-bottom: round($v-unit-size) !default;
-$v-layout-margin-left: round($v-unit-size) !default;
+$v-layout-margin-top : round($v-unit-size) !default;
+$v-layout-margin-right : round($v-unit-size) !default;
+$v-layout-margin-bottom : round($v-unit-size) !default;
+$v-layout-margin-left : round($v-unit-size) !default;
-$v-layout-spacing-vertical: round($v-unit-size/3) !default;
-$v-layout-spacing-horizontal: round($v-unit-size/3) !default;
+$v-layout-spacing-vertical : round($v-unit-size/3) !default;
+$v-layout-spacing-horizontal : round($v-unit-size/3) !default;
-$v-border-width: 1px !default; // Must be specified in pixels
-$v-border-radius: 4px !default; // Must be specified in pixels
+$v-border : 1px solid (v-shade 0.7) !default; // Size must be specified in pixels
+$v-border-radius : 4px !default; // Must be specified in pixels
-$v-gradient-style: v-linear !default;
-$v-gradient-depth: 8% !default;
+$v-gradient : v-linear 8% !default;
-$v-bevel-style: inset 0 1px 0 v-hilite, inset 0 -1px 0 v-shade !default;
-$v-bevel-depth: 25% !default;
+$v-bevel : inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default;
+$v-bevel-depth : 25% !default;
-$v-shadow-style: 0 2px 3px v-shade !default;
-$v-shadow-depth: 5% !default;
+$v-shadow : 0 2px 3px v-shade !default;
+$v-shadow-opacity : 5% !default;
-$v-focus-style: 0 0 0 2px v-focus-color !default;
-$v-focus-color: null !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-animations-enabled: true !default;
-$v-hover-styles-enabled: true !default;
+$v-animations-enabled : true !default;
+$v-hover-styles-enabled : true !default;
-$v-disabled-opacity: 0.7 !default;
+$v-disabled-opacity : 0.5 !default;
-$v-selection-color: null !default;
+$v-selection-color : valo-focus-color() !default;
-$v-default-field-width: $v-unit-size * 5 !default;
+$v-default-field-width : $v-unit-size * 5 !default;
-$v-error-indicator-color: #ed473b !default;
-$v-required-field-indicator-color: $v-error-indicator-color !default;
+$v-error-indicator-color : #ed473b !default;
+$v-required-field-indicator-color : $v-error-indicator-color !default;
-$valo-include-common-stylenames: true !default;
+$valo-include-common-stylenames : true !default;
-@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;
}
+// "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)
}
-@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;
}
}
+
+@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) {
@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) {
}
$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;
+ }
}
-@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);
}
}
-@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);
+}
-@function contains ($list, $var, $recursive: false) {
+@function contains($list, $var, $recursive: false) {
@if $recursive == false {
@return (false != index($list, $var));
}
@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
@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});
}
@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;
@else {
$result: ();
-
+
@for $i from 1 through length($list) {
@if $i == $index {
$result: append($result, $value);
@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;
@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;
@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;
}
@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;
@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 {
}
}
}
-
+
@return $result;
}
@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;
@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));
}
@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 {
@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
+}
// 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;
height: 100%;
vertical-align: middle;
}
-
+
@if length($to-align) > 0 {
@each $selector in $to-align {
& > #{unquote($selector)} {
}
-// 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;
+}
projects / vaadin-framework.git / commitdiff