Add a small API for checkbox, radio button and option group.
Fix border radius for ComboBox (no-text-input + small/large style).
Add better support for form layout section captions (now supports h2,
h3 and h4 labels instead of just h4).
Add “align-right” and “align-center” utility style names for label.
Fix black line artifacts in iOS for panel, window and tabsheet (visible
at certain zoom levels).
Refactor tab sheet styles to be more modular (so you can combine framed
with icons-on-top for instance).
Fix tab sheet loading indicator reserving unnecessary space in parent
layout.
Readonly style for richtextarea.
Fix slider handle focus border color.
Fix #14058: Valo causes Table headers to be overly long
- Table now reserves as little space as necessary
- TreeTable works slightly differently, causing it to reserve more
space in some situations
Rename table mixins to follow naming convention (mixins that do not
output top-level selectors should be suffixed with “-style”, others
not).
Fix TreeTable treespacer style so that it works correctly with row
captions/icons.
Prevent text size adjust on iOS.
Refine default overlay shadow.
Change-Id: I31fa8905c5aa34ab810c3d1c7ac35c3f572c8c04
@mixin valo-checkbox ($primary-stylename: v-checkbox) {
- .#{$primary-stylename},
- .v-radiobutton {
+ .#{$primary-stylename} {
@include valo-checkbox-style;
}
}
-@mixin valo-checkbox-style ($background-color: $v-background-color, $size: $v-unit-size, $selection-color: $v-selection-color) {
+@mixin valo-checkbox-style ($background-color: $v-background-color, $unit-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;
+ $size: $unit-size/2;
position: relative;
line-height: round($size);
cursor: pointer;
text-shadow: valo-text-shadow();
+ @if $v-border-radius != $v-textfield-border-radius {
+ border-radius: $v-border-radius;
+ }
+
.#{$primary-stylename}-input {
@include user-select(none);
@include valo-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;
- }
+ border-radius: inherit;
&:focus {
@include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color);
span.v-icon {
color: valo-font-color($background-color);
width: $unit-size;
+ line-height: 1;
+ padding-top: .12em;
}
&.#{$primary-stylename}-prompt > .#{$primary-stylename}-input {
.v-caption {
padding-bottom: 0;
}
+
+ .v-caption-h2,
+ .v-caption-h3,
+ .v-caption-h4 {
+ height: 3em;
+ }
}
.#{$primary-stylename}-contentcell {
font-weight: $v-font-weight + 100;
}
+ > .h2,
+ > .h3,
> .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);
}
}
> .v-textfield,
> .v-textarea,
> .v-filterselect input,
- > .v-datefield input {
+ > .v-datefield input,
+ > .v-richtextarea {
@include valo-textfield-style($unit-size: $row-height, $border-radius: 0, $border: null, $bevel: none, $shadow: none, $background-color: null);
background: transparent;
border: none;
@include valo-textfield-prompt-style;
}
- > .v-textarea {
+ > .v-textarea,
+ > .v-richtextarea {
height: auto;
}
}
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;
+ > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell {
+ > .h2,
+ > .h3,
+ > .h4 {
+ border-bottom: none;
+ color: $v-selection-color;
+ }
+
+ > .h3,
+ > .h4 {
+ margin-top: 0;
+ }
}
}
}
}
+ .#{$primary-stylename}-align-right {
+ text-align: right;
+ }
+
+ .#{$primary-stylename}-align-center {
+ text-align: center;
+ }
+
}
@mixin valo-optiongroup ($primary-stylename: v-optiongroup) {
.v-radiobutton {
- :root & > input {
- &:checked ~ label:after {
- $size: ceil($v-unit-size/6);
- $offset: round($v-unit-size/6);
- width: $size;
- height: $size;
- top: $offset;
- left: $offset;
- background: $v-selection-color;
- }
-
- & ~ label:before,
- & ~ label:after {
- border-radius: 50%;
- content: "";
- }
- }
+ @include valo-radiobutton-style;
}
.v-select-optiongroup {
+ @include valo-optiongroup-style;
+ }
- .v-radiobutton,
- .v-checkbox {
- display: block;
- margin: round($v-unit-size/4) $v-font-size 0 0;
+}
+
+
+@mixin valo-radiobutton-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) {
+ @include valo-checkbox-style($background-color: $background-color, $unit-size: $unit-size, $selection-color: $selection-color);
+
+ :root & > input {
+ &:checked ~ label:after {
+ $size: ceil($unit-size/6);
+ $offset: round($unit-size/6);
+ width: $size;
+ height: $size;
+ top: $offset;
+ left: $offset;
+ background: $selection-color;
+ }
+
+ & ~ label:before,
+ & ~ label:after {
+ border-radius: 50%;
+ content: "";
+ }
+ }
+}
- &:first-child {
- margin-top: round($v-unit-size/6);
- }
- &:last-child {
- margin-bottom: round($v-unit-size/6);
- }
+
+@mixin valo-optiongroup-style ($unit-size: $v-unit-size, $font-size: $v-font-size) {
+
+ @if $unit-size != $v-unit-size {
+ .v-checkbox {
+ @include valo-checkbox-style($unit-size: $unit-size);
}
+ .v-radiobutton {
+ @include valo-radiobutton-style($unit-size: $unit-size);
+ }
+ }
+
+ .v-radiobutton,
+ .v-checkbox {
+ display: block;
+ margin: round($unit-size/4) $font-size 0 0;
- &.v-has-width label {
- white-space: normal;
+ &:first-child {
+ margin-top: round($unit-size/6);
}
+ &:last-child {
+ margin-bottom: round($unit-size/6);
+ }
}
+ &.v-has-width label {
+ white-space: normal;
+ }
}
&.v-has-width {
white-space: normal;
-
+
label {
white-space: nowrap;
}
bottom: -$border-width;
right: 0;
left: 0;
- height: $border-width;
- background: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
+ height: 0;
+ border-top: $border-width solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
}
}
position: absolute;
z-index: 2;
top: 0;
- height: $border-width;
- background: $v-app-background-color;
+ height: 0;
+ border-top: $border-width solid $v-app-background-color;
left: 0;
right: 0;
}
display: block;
}
+ .#{$primary-stylename}-readonly {
+ padding: ceil($v-unit-size/9) ceil($v-unit-size/6);
+ background: transparent;
+ }
+
}
&:after {
border: valo-border();
- @include valo-button-focus-style();
+ @include valo-button-focus-style($border-fallback: null);
opacity: 0;
@if $v-animations-enabled {
@include transition(opacity 200ms);
&:after {
border: valo-border($color: $background-color);
- @include valo-button-focus-style($background-color: $background-color);
+ @include valo-button-focus-style($background-color: $background-color, $border-fallback: null);
}
}
}
overflow: hidden;
}
+ .#{$primary-stylename}-caption-container-align-center {
+ text-align: center;
+ }
+
.#{$primary-stylename}-caption-container-align-right {
text-align: right;
}
@include valo-gradient($v-background-color);
white-space: nowrap;
font-size: $v-table-header-font-size;
- text-shadow: valo-text-shadow;
+ text-shadow: valo-text-shadow();
}
.#{$primary-stylename}-header-wrap {
.#{$primary-stylename}-caption-container {
overflow: hidden;
line-height: 1;
+ @include box-sizing(border-box);
}
.#{$primary-stylename}-footer-container {
$vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
- padding-top: $vertical-padding - $v-table-border-width;
- padding-bottom: $vertical-padding;
+ padding: $vertical-padding - $v-table-border-width $v-table-cell-padding-horizontal $vertical-padding;
float: right;
- padding-right: $v-table-cell-padding-horizontal + $v-table-border-width;
}
[class^="#{$primary-stylename}-header-cell"] {
position: relative;
- display: inline-block;
}
.#{$primary-stylename}-caption-container,
.#{$primary-stylename}-header-drag {
$vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
- padding-top: $vertical-padding;
- padding-bottom: $vertical-padding - $v-table-border-width;
- padding-left: $v-table-cell-padding-horizontal;
- padding-right: $v-table-cell-padding-horizontal;
+ padding: $vertical-padding $v-table-cell-padding-horizontal $vertical-padding - $v-table-border-width;
border-left: $v-table-border-width solid $border-color;
}
+ .#{$primary-stylename}-caption-container-align-right {
+ padding-right: $v-table-cell-padding-horizontal - $v-table-resizer-width;
+ }
+
.#{$primary-stylename}-resizer {
height: $v-table-row-height;
- background: transparent;
width: $v-table-resizer-width;
cursor: e-resize;
cursor: col-resize;
position: absolute;
+ top: 0;
right: 0;
z-index: 1;
}
.#{$primary-stylename}-cell-content {
border-left: $v-table-border-width solid $border-color;
- padding: 0 $v-table-cell-padding-horizontal;
+ overflow: hidden;
&:first-child {
border-left: none;
- padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
+ padding-left: $v-table-border-width;
}
}
.#{$primary-stylename}-cell-wrapper {
- white-space: nowrap;
line-height: 1;
$vertical-padding: round(($v-table-row-height - $v-font-size)/2);
- padding: $vertical-padding 0;
+ padding: $vertical-padding $v-table-cell-padding-horizontal;
+ @include box-sizing(border-box);
+ margin-right: 0 !important;
}
.#{$primary-stylename}-body {
.#{$primary-stylename}-table {
background-color: $background-color;
+ white-space: nowrap;
}
.#{$primary-stylename}-table td {
line-height: $v-table-row-height;
position: absolute;
right: 0;
-
- + .#{$primary-stylename}-caption-container {
- padding-right: $v-table-sort-indicator-width;
- }
}
.#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before,
}
+ [class*="rowheader"] span.v-icon {
+ min-width: 1em;
+ }
+
+
.#{$primary-stylename}-focus {
$outline-width: max($v-table-border-width, 1px);
- outline: $outline-width solid valo-focus-color();
+ outline: $outline-width solid $v-focus-color;
outline-offset: -$outline-width;
}
}
.#{$primary-stylename}-focus-slot-right {
- border-right: 2px solid rgba(valo-focus-color(), .5);
+ border-right: 2px solid rgba($v-focus-color, .5);
}
.#{$primary-stylename}-focus-slot-left {
- border-left: 2px solid rgba(valo-focus-color(), .5);
+ border-left: 2px solid rgba($v-focus-color, .5);
left: 0;
right: auto;
margin-left: 0 !important;
// Drag'n'drop styles
.#{$primary-stylename}-drag .#{$primary-stylename}-body {
- box-shadow: 0 0 0 2px rgba(valo-focus-color(), .5);
+ box-shadow: 0 0 0 2px rgba($v-focus-color, .5);
- @if color-luminance(valo-focus-color()) + 50 < color-luminance($background-color) {
- border-color: valo-focus-color();
+ @if color-luminance($v-focus-color) + 50 < color-luminance($background-color) {
+ border-color: $v-focus-color;
}
.v-ie8 & {
- border-color: valo-focus-color();
+ border-color: $v-focus-color;
}
.#{$primary-stylename}-focus {
height: $v-table-row-height + $v-table-border-width;
left: 0;
right: 0;
- background: valo-focus-color();
+ background: $v-focus-color;
@include opacity(.2);
}
height: 2px;
left: 0;
right: 0;
- background: valo-focus-color();
+ background: $v-focus-color;
font-size: $v-font-size * 2;
line-height: 2px;
- color: valo-focus-color();
+ color: $v-focus-color;
text-indent: round($v-font-size/-4);
text-shadow: 0 0 1px $background-color, 0 0 1px $background-color;
}
-@mixin valo-table-no-stripes ($primary-stylename: v-table) {
+@mixin valo-table-no-stripes-style ($primary-stylename: v-table) {
.#{$primary-stylename}-row,
.#{$primary-stylename}-row-odd {
background: transparent;
}
-
-
-@mixin valo-table-no-vertical-lines ($primary-stylename: v-table) {
+@mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) {
.#{$primary-stylename}-cell-content,
[class*="row"].v-selected .#{$primary-stylename}-cell-content {
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;
+ padding-left: $v-table-border-width;
+ }
+
+ &.v-treetable {
+ .#{$primary-stylename}-cell-content,
+ [class*="row"].v-selected .#{$primary-stylename}-cell-content {
+ padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
+ }
}
}
-@mixin valo-table-no-horizontal-lines ($primary-stylename: v-table) {
+
+@mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) {
.#{$primary-stylename}-cell-content,
[class*="row"].v-selected .#{$primary-stylename}-cell-content {
border-top: none;
}
}
-@mixin valo-table-no-header ($primary-stylename: v-table) {
+
+@mixin valo-table-no-header-style ($primary-stylename: v-table) {
.#{$primary-stylename}-header-wrap {
display: none;
}
}
-@mixin valo-table-borderless ($primary-stylename: v-table) {
+
+@mixin valo-table-borderless-style ($primary-stylename: v-table) {
.#{$primary-stylename}-header-wrap,
.#{$primary-stylename}-footer-wrap,
.#{$primary-stylename}-header-drag,
}
}
-@mixin valo-table-compact-style (
+
+@mixin valo-table-spacing-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
) {
+ $vertical-padding: round(($row-height - $header-font-size)/2);
+
.#{$primary-stylename}-header-wrap,
.#{$primary-stylename}-footer-wrap,
.#{$primary-stylename}-header-drag {
}
.#{$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;
+ padding: $vertical-padding - $v-table-border-width $cell-padding-horizontal + $v-table-border-width $vertical-padding;
}
.#{$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}-caption-container-align-right {
+ padding-right: max(0, $cell-padding-horizontal - $v-table-resizer-width);
+ }
+
.#{$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;
- }
+ padding: $vertical-padding $cell-padding-horizontal;
}
.#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator,
.#{$primary-stylename}-row-drag-middle td:first-child:before {
height: $row-height + $v-table-border-width;
}
+
+ &.v-treetable {
+ .#{$primary-stylename}-cell-wrapper {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .#{$primary-stylename}-cell-content {
+ padding-left: $cell-padding-horizontal;
+ padding-right: $cell-padding-horizontal;
+
+ &:first-child {
+ padding-left: $cell-padding-horizontal + $v-table-border-width;
+ }
+ }
+
+ .#{$primary-stylename}-footer-container {
+ padding-left: $cell-padding-horizontal;
+ padding-right: $cell-padding-horizontal;
+ }
+ }
}
@include valo-anim-fade-in(300ms);
}
+ $spinner-size: round($v-unit-size/2);
+ $spinner-size: $spinner-size + $spinner-size % 2;
+
.#{$primary-stylename}-deco {
- @include valo-spinner($size: $v-unit-size/2);
+ @include valo-spinner($size: $spinner-size);
+ height: 0 !important;
+ border-style: none;
display: block;
position: absolute;
z-index: -1;
bottom: 50%;
- margin-bottom: round($v-unit-size/2 + $v-unit-size/4) * -1;
+ margin-bottom: round($v-unit-size/-2) - $spinner-size/2;
left: 50%;
- margin-left: round($v-unit-size/-4);
+ margin-left: $spinner-size/-2;
opacity: 0;
+
+ .v-ie8 & {
+ min-height: 0;
+ }
}
.#{$primary-stylename}-loading .#{$primary-stylename}-deco {
@include transition(opacity 200ms 200ms);
opacity: 1;
z-index: 1;
+ height: $spinner-size !important;
+ border-style: solid;
+
+ .v-ie8 &,
+ .v-ie9 & {
+ border-style: none;
+ }
+
+ .v-ie8 & {
+ min-height: 30px;
+ }
}
}
&:before {
content: "";
position: absolute;
- height: max(1px, first-number($v-border));
- background: first-color(valo-border($strength: 0.5));
+ height: 0;
+ // iOS panics with background color, creating black line artifacts
+ border-top: max(1px, first-number($v-border)) solid first-color(valo-border($strength: 0.5));
bottom: 0;
left: 0;
right: 0;
}
.#{$primary-stylename}-tabs {
- height: $v-unit-size;
position: relative;
}
}
@mixin valo-tabsheet-tabitemcell-style ($primary-stylename: v-tabsheet) {
+ vertical-align: bottom;
.#{$primary-stylename}-tabitem {
line-height: 0;
}
.v-caption {
- height: $v-unit-size;
margin-left: round($v-unit-size/2);
padding: 0 round($v-unit-size/10);
@include box-sizing(border-box);
color: valo-font-color($v-app-background-color, 0.58);
width: auto !important;
overflow: hidden;
+ text-overflow: ellipsis;
+ border-bottom: max(1px, first-number($v-border))*2 solid transparent;
@if $v-animations-enabled {
@include transition(border-bottom 200ms, color 200ms);
}
+ .v-captiontext {
+ display: inline;
+ }
+
.v-icon + .v-captiontext {
margin-left: round($v-unit-size/4);
}
.v-caption {
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: max(1px, first-number($v-border))*2 solid $v-selection-color;
+ border-bottom-color: $v-selection-color;
color: $v-selection-color;
}
$border-color: first-color(valo-border($strength: 0.5));
position: absolute;
+ top: 0;
right: 0;
bottom: 0;
padding-left: round($v-unit-size/2);
@include linear-gradient(to left, $v-background-color 70%, rgba($v-background-color, 0) 100%, $fallback: transparent);
pointer-events: none;
- line-height: $v-unit-size;
&:after {
content: "";
background: transparent;
font: inherit;
color: inherit;
- height: $v-unit-size;
- line-height: $v-unit-size;
+ height: 100%;
margin: 0;
padding: 0 round($v-unit-size/4);
outline: none;
-@mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet, $frame-inactive-tabs: true, $outer-frame: true, $tab-spacing: round($v-unit-size/10)) {
> .#{$primary-stylename}-tabcontainer {
.v-caption {
position: relative;
- margin-left: first-number($v-border) * 2;
+ margin-left: $tab-spacing or first-number($v-border) * -1;
padding: 0 $v-layout-spacing-horizontal;
border: first-number($v-border) solid transparent;
line-height: $v-unit-size - first-number($v-border);
margin-left: 0;
}
+ @if $frame-inactive-tabs {
+ .#{$primary-stylename}-tabitem .v-caption {
+ border-color: first-color(valo-border($strength: 0.5));
+ }
+ }
+
.#{$primary-stylename}-tabitem-selected .v-caption {
background: $v-panel-background-color;
border-color: first-color(valo-border($strength: 0.5));
- border-bottom: none;
+ border-bottom: first-number($v-border) solid transparent;
}
.v-caption-closable {
}
> .#{$primary-stylename}-content {
- background: $v-panel-background-color;
- border: valo-border($strength: 0.5);
- border-top: none;
+ // iOS panics with black line artifacts,
+ // moving the background color to an inner element fixes it
+ > div {
+ background: $v-panel-background-color;
+ }
+
+ @if $outer-frame {
+ border: valo-border($strength: 0.5);
+ border-top: none;
+ }
}
&.padded-tabbar {
> .#{$primary-stylename}-tabcontainer {
- border: valo-border($strength: 0.5);
- border-bottom: none;
+ @if $outer-frame {
+ border: valo-border($strength: 0.5);
+ border-bottom: none;
+ }
+
background: $v-background-color;
padding-top: round($v-unit-size/6);
}
@mixin valo-tabsheet-icons-on-top-style ($primary-stylename: v-tabsheet) {
> div > .#{$primary-stylename}-tabs {
- height: $v-unit-size * 2;
-
.v-caption {
- height: $v-unit-size * 2;
- padding-top: $v-unit-size;
+ padding-top: round($v-unit-size/6);
+ padding-bottom: round($v-unit-size/6);
+ line-height: 1.2;
}
.v-icon {
display: block;
- font-size: $v-font-size * 2;
- $_offset: round($v-unit-size/4);
- margin: -($v-unit-size - $_offset) auto #{-$_offset};
- min-height: $v-unit-size;
+ .v-captiontext.v-captiontext {
margin-left: 0;
}
}
}
-
- .#{$primary-stylename}-scroller {
- line-height: $v-unit-size*2;
-
- button[class] {
- padding: 0 round($v-unit-size/4);
- display: block;
- }
- }
-
- > .#{$primary-stylename}-deco {
- margin-bottom: -$v-unit-size - round($v-unit-size/4);
- }
}
@include transition(none);
}
- $focus-color: valo-focus-color();
+ $focus-color: $v-focus-color;
@if color-luminance($focus-color) + 50 < color-luminance($v-background-color) {
border-color: $focus-color;
-@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} {
+
+
+
+
+@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylenames: inline-icon, $input-selector: null, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) {
+ $slot-selector: "";
+ $caption-selector: "";
+ $text-input-selector: "";
+
+ @each $style in $stylenames {
+ $slot-selector: $slot-selector + ".v-slot-" + $style;
+ $caption-selector: $caption-selector + ".v-caption-" + $style;
+ $text-input-selector: $text-input-selector + "." + $primary-stylename + "-" + $style;
+ }
+
+ #{$slot-selector} {
position: relative;
}
- .v-caption-#{$stylename} {
+ #{$caption-selector} {
padding: 0;
.v-captiontext {
+ // Need to include to get the default padding back
@include valo-caption-style;
margin: 0;
}
}
}
- .#{$primary-stylename}-#{$stylename},
- .v-textarea-#{$stylename} {
+ #{$text-input-selector} #{$input-selector} {
padding-left: $unit-size;
}
}
@mixin valo-treetable ($primary-stylename: v-treetable) {
- .v-table-cell-wrapper {
- //position: relative;
+ .#{$primary-stylename} {
+ [class*="caption-container"],
+ [class*="footer-container"],
+ [class*="cell-wrapper"] {
+ @include box-sizing(content-box);
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ [class*="caption-container"] {
+ padding-left: $v-table-cell-padding-horizontal;
+ }
+
+ [class*="caption-container-align-right"] {
+ padding-left: $v-table-cell-padding-horizontal + $v-table-resizer-width;
+ }
+
+ [class*="footer-container"] {
+ padding-right: $v-table-cell-padding-horizontal;
+ }
+
+ [class*="cell-content"] {
+ padding-left: $v-table-cell-padding-horizontal;
+ padding-right: $v-table-cell-padding-horizontal;
+
+ &:first-child {
+ padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
+ }
+ }
}
.#{$primary-stylename}-treespacer {
display: inline-block;
- background: transparent;
- width: round($v-unit-size/2);
- //left: round($v-unit-size/-8);
- left: 0;
position: absolute;
- text-align: right;
-
- &:before {
-
- }
+ width: round($v-unit-size/2);
+ margin-left: round($v-unit-size/-2) - round($v-table-cell-padding-horizontal/2);
+ text-align: center;
}
.#{$primary-stylename}-node-closed:before {
.#{$primary-stylename}-node-open:before {
@include valo-tree-expanded-icon-style($force: true);
}
-}
\ No newline at end of file
+}
bottom: -$scroll-divider-width;
right: 0;
left: 0;
- height: $scroll-divider-width;
+ height: 0;
$_bg: $v-window-background-color;
- background: first-color(valo-border($strength: 0.5));
+ border-top: $scroll-divider-width solid first-color(valo-border($strength: 0.5));
}
}
@include transition(color 140ms);
}
- @if $v-window-border-radius > 0 {
- border-radius: 0 0 0 $v-window-border-radius;
- }
-
&:focus {
outline: none;
}
.#{$primary-stylename}-closebox {
padding-right: round($v-unit-size/9);
@include valo-window-close-icon-style;
+
+ @if $v-window-border-radius > 0 {
+ border-radius: 0 $v-window-border-radius 0 $v-window-border-radius;
+ }
}
.#{$primary-stylename}-maximizebox,
right: $v-unit-size - round($v-unit-size/9);
padding-left: round($v-unit-size/9);
- + .#{$primary-stylename}-closebox {
- border-bottom-left-radius: 0;
+ @if $v-window-border-radius > 0 {
+ border-radius: 0 0 0 $v-window-border-radius;
+
+ + .#{$primary-stylename}-closebox {
+ border-bottom-left-radius: 0;
+ }
}
}
position: absolute;
z-index: 2;
top: 0;
- height: $scroll-divider-width;
- background: $v-window-background-color;
+ height: 0;
+ border-top: $scroll-divider-width solid $v-window-background-color;
left: 0;
right: 0;
}
.v-panel-captionwrap:after {
- background: first-color(valo-border($strength: 0.5));
+ border-color: first-color(valo-border($strength: 0.5));
}
.v-panel-content:before {
- background: $v-window-background-color;
+ border-color: $v-window-background-color;
}
}
}
// Common styles for components
-// About 50KB of CSS output
+// About 90KB of CSS output
@import "valo-menu";
&.v-button-small {
width: $v-unit-size--small;
}
+
+ &.v-button-large {
+ width: $v-unit-size--large;
+ }
+
+ .v-button-caption {
+ display: none;
+ }
}
.v-link-small {
font-size: $v-font-size--large;
}
+ .v-tabsheet-equal-width-tabs {
+ @include valo-tabsheet-equal-width-tabs-style($flex: false);
+ }
+
.v-tabsheet-framed {
@include valo-tabsheet-framed-style;
}
@include valo-tabsheet-centered-tabs-style;
}
- .v-tabsheet-equal-width-tabs {
- @include valo-tabsheet-equal-width-tabs-style($flex: false);
- }
-
.v-tabsheet-padded-tabbar {
@include valo-tabsheet-padded-tabbar-style;
}
@include valo-tabsheet-icons-on-top-style;
}
+ .v-tabsheet-compact-tabbar {
+ > .v-tabsheet-tabcontainer-compact-tabbar .v-caption {
+ line-height: 1.8;
+ }
+ }
+
.v-tabsheet-only-selected-closable {
@include valo-tabsheet-only-selected-closable-style;
}
}
.v-textfield-borderless,
- .v-textarea-borderless {
+ .v-textarea-borderless,
+ .v-datefield-borderless .v-datefield-textfield,
+ .v-filterselect-borderless .v-filterselect-input {
@include valo-textfield-borderless-style;
}
+ .v-datefield-borderless .v-datefield-button,
+ .v-filterselect-borderless .v-filterselect-button {
+ border: none;
+ }
+
.v-textfield-small {
@include valo-textfield-style($unit-size: $v-unit-size--small);
font-size: $v-font-size--small;
font-size: $v-font-size--large;
}
- @include valo-textfield-inline-icon($stylename: inline-icon);
+ @include valo-textfield-inline-icon($stylenames: inline-icon);
+ @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
+ @include valo-textfield-inline-icon($stylenames: inline-icon large, $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);
}
.v-textfield-align-right,
- .v-textarea-align-right {
+ .v-textarea-align-right,
+ .v-datefield-align-right input,
+ .v-filterselect-align-right input {
text-align: right;
}
.v-textfield-align-center,
- .v-textarea-align-center {
+ .v-textarea-align-center,
+ .v-datefield-align-center input,
+ .v-filterselect-align-center input {
text-align: center;
}
}
.v-checkbox-small {
- @include valo-checkbox-style($size: $v-unit-size--small);
+ @include valo-checkbox-style($unit-size: $v-unit-size--small);
font-size: $v-font-size--small;
}
.v-checkbox-large {
- @include valo-checkbox-style($size: $v-unit-size--large);
+ @include valo-checkbox-style($unit-size: $v-unit-size--large);
+ font-size: $v-font-size--large;
+ }
+
+ .v-select-optiongroup-small {
+ @include valo-optiongroup-style($unit-size: $v-unit-size--small);
+ font-size: $v-font-size--small;
+ }
+
+ .v-select-optiongroup-large {
+ @include valo-optiongroup-style($unit-size: $v-unit-size--large);
font-size: $v-font-size--large;
}
@include valo-panel-scroll-divider-style;
}
- .v-csslayout-well {
+ .v-csslayout-well,
+ .v-verticallayout-well,
+ .v-horizontallayout-well {
@include valo-panel-well-style;
@include valo-panel-adjust-content-margins;
}
- .v-csslayout-card {
+ .v-csslayout-card,
+ .v-verticallayout-card,
+ .v-horizontallayout-card {
@include valo-panel-style;
@include valo-panel-adjust-content-margins;
}
.v-table-no-stripes {
- @include valo-table-no-stripes;
+ @include valo-table-no-stripes-style;
}
.v-table-no-vertical-lines {
- @include valo-table-no-vertical-lines;
+ @include valo-table-no-vertical-lines-style;
}
.v-table-no-horizontal-lines {
- @include valo-table-no-horizontal-lines;
+ @include valo-table-no-horizontal-lines-style;
}
.v-table-no-header {
- @include valo-table-no-header;
+ @include valo-table-no-header-style;
}
.v-table-borderless {
- @include valo-table-borderless;
+ @include valo-table-borderless-style;
}
.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));
+ @include valo-table-spacing-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 {
}
}
+ .v-slider-no-indicator {
+ @include valo-slider-no-indicator;
+ }
+
@include valo-menu;
height: 100%;
// Cancel tap highlight from all elements inside the app
-webkit-tap-highlight-color: rgba(0,0,0,0);
+
+ // Prevent iOS text size adjust after orientation change, without disabling user zoom
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
}
.v-ui {
$v-overlay-padding-vertical: $v-overlay-padding !default;
$v-overlay-padding-horizontal: $v-overlay-padding !default;
-$v-overlay-shadow: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default;
+$v-overlay-shadow: 0 4px 10px 0 (v-shade 2), 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default;
$v-selection-overlay-background-color: $v-overlay-background-color !default;
$v-selection-overlay-padding: $v-overlay-padding !default;
$color: $background-color;
@each $b in $bevel {
+ $strength: 1;
@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));
}
+ $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength));
}
@return 0 if($needle==v-tint, $offset, $offset*-1) 0 $color;
projects / vaadin-framework.git / commitdiff