/**
* Outputs the styles for a button variant.
*
- * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds the its height
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its height
* @param {size | list} $padding (null) - The padding of the button. Computed from other parameters by default.
* @param {color} $font-color (null) - The font color of the button. Computed from the $background-color by default.
* @param {number} $font-weight ($v-font-weight + 100) - The font weight of the button
+/**
+ * Outputs the selectors and properties for the ComboBox component.
+ *
+ * @param {string} $primary-stylename (v-filterselect) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group combobox
+ */
@mixin valo-combobox ($primary-stylename: v-filterselect, $include-additional-styles: contains($v-included-additional-styles, combobox)) {
.#{$primary-stylename} {
position: relative;
width: $v-default-field-width;
- @include valo-combobox-style($primary-stylename: $primary-stylename);
+ @include valo-combobox-style;
white-space: nowrap;
.v-icon {
}
.#{$primary-stylename}-suggestpopup {
- @include valo-combobox-popup-style($primary-stylename: $primary-stylename);
+ @include valo-combobox-popup-style;
}
.#{$primary-stylename}-no-input {
- 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;
- cursor: inherit;
- @include 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;
- border-radius: inherit;
-
- &: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;
- }
+ @include valo-combobox-no-input-style;
}
}
-
-
-
-
+/**
+ * Outputs the styles for a combobox variant.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the combobox, which corresponds its height
+ * @param {color} $font-color (null) - The font color of the combobox. Computed from the $background-color by default.
+ * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the combobox
+ * @param {size} $font-size (null) - The font size of the combobox. Inherited from the parent by default.
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the combobox
+ * @param {list} $border ($v-textfield-border) - The border of the combobox
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the combobox
+ * @param {list} $gradient (none) - Valo specific gradient value. See the documentation for $v-gradient.
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal focus disabled) - The combobox states for which to output corresponding styles
+ *
+ * @group combobox
+ */
@mixin valo-combobox-style (
$unit-size: $v-unit-size,
- $font-color: null, // Computed by default
+ $font-color: null,
$font-weight: max(400, $v-font-weight),
- $font-size: null, // Inherited by default
+ $font-size: null,
$background-color: $v-textfield-background-color,
$border: $v-textfield-border,
$bevel: $v-textfield-bevel,
$shadow: $v-textfield-shadow,
- $primary-stylename: v-filterselect,
$states: normal focus disabled
) {
height: $unit-size;
border-radius: $border-radius;
- .#{$primary-stylename}-input {
+ [class*="input"] {
@include valo-combobox-input-style(
$unit-size: $unit-size,
$gradient: $gradient,
$states: $states);
}
- .v-icon + .#{$primary-stylename}-input {
+ .v-icon + [class*="input"] {
padding-left: $unit-size;
}
padding-top: .12em;
}
- &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input {
+ &[class*="prompt"] > [class*="input"] {
@include valo-textfield-prompt-style($background-color);
}
- .#{$primary-stylename}-button {
- @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color);
+ [class$="button"] {
+ @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border);
}
&.v-disabled {
@include opacity($v-textfield-disabled-opacity);
- & .#{$primary-stylename}-button {
+ & [class$="button"] {
cursor: default;
pointer-events: none;
&:active:after {
}
&.v-readonly {
- .#{$primary-stylename}-input {
+ [class*="input"] {
@include valo-textfield-readonly-style;
}
- .#{$primary-stylename}-button {
+ [class$="button"] {
cursor: default;
pointer-events: none;
&:active:after {
}
-
-
+/**
+ * Outputs the styles for a combobox variant input element.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the input (affects the padding only, width and height are 100%)
+ * @param {size | list} $padding (null) - The padding of the input. Computed from other parameters by default.
+ * @param {color} $font-color (null) - The font color of the input. Computed from the $background-color by default.
+ * @param {number} $font-weight (null) - The font weight of the input. Inherited from the parent by default.
+ * @param {size} $font-size (null) - The font size of the combobox. Inherited from the parent by default.
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the input
+ * @param {list} $border ($v-textfield-border) - The border of the input
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input
+ * @param {list} $gradient (none) - Valo specific gradient value. See the documentation for $v-gradient.
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal focus disabled) - The combobox states for which to output corresponding styles
+ *
+ * @group combobox
+ */
@mixin valo-combobox-input-style (
$unit-size: $v-unit-size,
- $padding: null, // Computed by default
+ $padding: null,
- $font-color: null, // Computed by default
- $font-weight: null, // Inherited by default
- $font-size: null, // Inherited by default
+ $font-color: null,
+ $font-weight: null,
+ $font-size: null,
$background-color: $v-textfield-background-color,
- $border: $v-border,
+ $border: $v-textfield-border,
$border-radius: $v-textfield-border-radius,
$gradient: none,
}
-
-
-
-
-
-@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);
+/**
+ * Outputs the styles for a combobox variant button element.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button
+ * @param {list} $border ($v-textfield-border) - The border of the input, which affects the border of the button
+ *
+ * @group combobox
+ */
+@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) {
+ $border-width: first-number($v-textfield-border) or 0;
@include valo-tappable;
position: absolute;
top: $border-width;
}
-
+/**
+ * Outputs the font icon styles for the combobox drop down button.
+ *
+ * @group combobox
+ */
@mixin valo-combobox-button-icon-style {
font-family: FontAwesome;
content: "\f078";
}
-
-
-@mixin valo-combobox-popup-style ($primary-stylename: v-filterselect) {
+/**
+ * Outputs the styles for a combobox popup.
+ *
+ * @group combobox
+ */
+@mixin valo-combobox-popup-style {
@if $v-animations-enabled {
@if $v-overlay-animate-in {
// closing when the user selects an item
}
- .#{$primary-stylename}-suggestmenu {
+ [class$="suggestmenu"] {
@include valo-selection-overlay-style($animate-in: false, $animate-out: false);
@include box-sizing(border-box);
position: relative;
@include valo-selection-item-selected-style;
}
- .#{$primary-stylename}-status {
+ [class$="status"] {
position: absolute;
right: $v-border-radius;
$bg: scale-color($v-background-color, $lightness: -15%);
display: none;
}
}
+
+@mixin valo-combobox-no-input-style {
+ cursor: pointer;
+ text-shadow: valo-text-shadow();
+
+ @if $v-border-radius != $v-textfield-border-radius {
+ border-radius: $v-border-radius;
+ }
+
+ [class*="input"] {
+ @include user-select(none);
+ @include valo-gradient;
+ cursor: inherit;
+ @include 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;
+ border-radius: inherit;
+
+ &:focus {
+ @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color);
+ }
+ }
+
+ [class$="button"] {
+ border-left: none !important;
+ }
+
+ &:hover [class$="button"]:before {
+ color: inherit;
+ }
+}
+/**
+ * The amount of spacing between different widgets in a component group.
+ * If null, a computed value is used ($v-border size * -1, or 1px if $v-border size is 0)
+ *
+ * @group csslayout
+ */
$v-component-group-spacing: null !default;
+/**
+ * Outputs the additional styles for the CssLayout component. Does not produce any other output.
+ *
+ * @param {string} $primary-stylename (v-csslayout) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group csslayout
+ */
@mixin valo-csslayout ($primary-stylename: v-csslayout, $include-additional-styles: contains($v-included-additional-styles, csslayout)){
@if $include-additional-styles {
.#{$primary-stylename}-well {
}
+/**
+ * Outputs the styles for a horizontal component group. The target component is
+ * expected to be a CssLayout, which is a single DIV element with child components
+ * directly inside.
+ *
+ * @group csslayout
+ *
+ * @example scss
+ * .my-csslayout {
+ * @include valo-component-group;
+ * }
+ */
@mixin valo-component-group {
white-space: nowrap;
position: relative;
+/**
+ * Outputs the selectors and properties for the DateField component.
+ *
+ * @param {string} $primary-stylename (v-datefield) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group datefield
+ */
@mixin valo-datefield ($primary-stylename: v-datefield, $include-additional-styles: contains($v-included-additional-styles, datefield)) {
.#{$primary-stylename} {
position: relative;
width: $v-default-field-width;
- @include valo-datefield-style($primary-stylename: $primary-stylename);
+ @include valo-datefield-style;
}
.#{$primary-stylename}-error {
}
+/**
+ * Outputs the selectors and properties for the InlineDateField component.
+ *
+ * @param {string} $primary-stylename (v-inline-datefield) - the primary style name for the selectors
+ *
+ * @group datefield
+ */
@mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) {
@include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel);
}
-
-
-
+/**
+ * Outputs the styles for a date field variant.
+ *
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the datefield, which corresponds its height
+ * @param {list} $border ($v-textfield-border) - The border of the datefield
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the datefield
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the datefield
+ * @param {list} $states (normal focus disabled) - The datefield states for which to output corresponding styles
+ *
+ * @group datefield
+ */
@mixin valo-datefield-style (
$bevel : $v-textfield-bevel,
$shadow : $v-textfield-shadow,
$border : $v-textfield-border,
$border-radius : $v-textfield-border-radius,
$background-color : $v-textfield-background-color,
- $primary-stylename : v-datefield,
$states : normal focus disabled
) {
height: $unit-size;
border-radius: $border-radius;
- .#{$primary-stylename}-textfield {
+ [class*="textfield"] {
@include box-sizing(border-box);
@include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color, $states: $states) ;
padding-left: $unit-size * 1.2;
border-radius: inherit;
}
- &.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield {
+ &[class*="prompt"] > [class*="textfield"] {
@include valo-textfield-prompt-style($background-color);
}
- .#{$primary-stylename}-button {
+ [class$="button"] {
@include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border);
}
&.v-disabled {
@include opacity($v-disabled-opacity);
- .#{$primary-stylename}-button {
+ [class$="button"] {
cursor: default;
pointer-events: none;
&:active:after {
}
&.v-readonly {
- .#{$primary-stylename}-textfield {
+ [class*="textfield"] {
@include valo-textfield-readonly-style;
}
- .#{$primary-stylename}-button {
+ [class$="button"] {
cursor: default;
pointer-events: none;
&:active:after {
}
-
-
+/**
+ * Outputs the styles for a date field variant button element.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button
+ * @param {list} $border ($v-textfield-border) - The border of the input, which affects the border of the button
+ *
+ * @group datefield
+ */
@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: $v-textfield-border) {
- $border-width: first-number($border) or first-number($v-textfield-border);
+ $border-width: first-number($border) or 0;
@include valo-tappable;
-webkit-appearance: none;
background: transparent;
}
-
-
+/**
+ * Outputs the font icon styles for the date field drop down button.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-button-icon-style {
font-family: FontAwesome;
content: "\f073";
}
-
-
+/**
+ * Outputs the styles for a date field popup.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-popup-style {
@include valo-overlay-style;
}
+/**
+ * Outputs the styles for calendar panel (i.e. month view).
+ *
+ * @param {string} $primary-stylename (v-datefield-calendarpanel) - the primary style name for the selectors
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) {
.#{$primary-stylename} {
font-size: $v-font-size;
}
-
-
+/**
+ * Outputs the styles for an individual day element in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-day-style {
@include box-sizing(border-box);
width: round($v-unit-size * 0.8);
}
}
+
+/**
+ * Outputs the hover state styles for an individual day element in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-day-hover-style {
color: $v-selection-color;
}
+
+/**
+ * Outputs the styles for an individual day element, which are not part of the current month, in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-day-offmonth-style {
color: mix(valo-font-color($v-background-color), $v-background-color);
background: transparent;
}
+
+/**
+ * Outputs the styles for todays day element in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-day-today-style {
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);
}
+
+/**
+ * Outputs the styles for the selected day element in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-day-selected-style {
color: valo-font-color($v-selection-color);
@include valo-gradient($v-selection-color);
font-weight: max(600, $v-font-weight + 100);
}
+
+/**
+ * Outputs the focus state styles for an individual day element in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-day-focused-style {
@include valo-focus-style;
position: relative; // Show above other cells
}
+/**
+ * Outputs the font icon styles for the next month button in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-nextmonth-icon-style {
font-family: FontAwesome;
content: "\f105";
}
+
+/**
+ * Outputs the font icon styles for the previous month button in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-prevmonth-icon-style {
font-family: FontAwesome;
content: "\f104";
}
+
+/**
+ * Outputs the font icon styles for the next year button in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-nextyear-icon-style {
font-family: FontAwesome;
content: "\f101";
}
+
+/**
+ * Outputs the font icon styles for the previous year button in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-prevyear-icon-style {
font-family: FontAwesome;
content: "\f100";
}
+
+/**
+ * Outputs the styles for the current month and year title element in a calendar panel.
+ *
+ * @group datefield
+ */
@mixin valo-datefield-calendarpanel-month-style {
color: $v-selection-color;
}
+/**
+ * Outputs the styles and selectors for the DragAndDropWrapper component.
+ *
+ * @param {string} $primary-stylename (v-ddwrapper) - the primary style name for the selectors
+ *
+ * @group drag-n-drop
+ */
@mixin valo-dragwrapper ($primary-stylename: v-ddwrapper) {
[draggable=true] {
}
-
-
+/**
+ * Outputs the styles for a drop target when the drag is on top of it.
+ *
+ * @group drag-n-drop
+ */
@mixin valo-ddwrapper-box-hint-style {
border-width: 2px;
border-radius: $v-border-radius;
+/**
+ * Outputs the selectors and properties for the FormLayout component.
+ *
+ * @param {string} $primary-stylename (v-formlayout) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group formlayout
+ */
@mixin valo-formlayout ($primary-stylename: v-formlayout, $include-additional-styles: contains($v-included-additional-styles, formlayout)) {
@include valo-formlayout-spacing;
- @include valo-formlayout-margins;
+ @include valo-formlayout-margin;
.#{$primary-stylename} > table {
border-spacing: 0;
@if $include-additional-styles {
.#{$primary-stylename}.light {
- @include valo-formlayout-light-style($primary-stylename);
+ @include valo-formlayout-light-style;
}
}
}
-@mixin valo-formlayout-margins ($primary-stylename: v-formlayout, $all: null, $top: $v-layout-margin-top, $right: $v-layout-margin-right, $bottom: $v-layout-margin-bottom, $left: $v-layout-margin-left) {
- @if $all != null {
- $top: $all;
- $right: $all;
- $bottom: $all;
- $left: $all;
- }
-
- .#{$primary-stylename}-margin-top > tbody > .#{$primary-stylename}-firstrow {
- > .#{$primary-stylename}-captioncell,
- > .#{$primary-stylename}-contentcell,
- > .#{$primary-stylename}-errorcell {
- padding-top: $top;
- }
- }
-
- .#{$primary-stylename}-margin-bottom > tbody > .#{$primary-stylename}-lastrow {
- > .#{$primary-stylename}-captioncell,
- > .#{$primary-stylename}-contentcell,
- > .#{$primary-stylename}-errorcell {
- padding-bottom: $bottom;
- }
- }
-
- .#{$primary-stylename}-margin-left > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell {
+/**
+ * Outputs the styles for form layout margin.
+ *
+ * @param {list} $margin ($v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) - The margin for the form layout (any valid CSS margin value)
+ *
+ * @group formlayout
+ */
+@mixin valo-formlayout-margin ($margin: $v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) {
+ $top: 0;
+ $right: 0;
+ $bottom: 0;
+ $left: 0;
+
+ @if length($margin) == 1 {
+ $top: $margin;
+ $right: $margin;
+ $bottom: $margin;
+ $left: $margin;
+ } @else if length($margin) == 2 {
+ $top: nth($margin, 1);
+ $right: nth($margin, 2);
+ $bottom: nth($margin, 1);
+ $left: nth($margin, 2);
+ } @else if length($margin) == 3 {
+ $top: nth($margin, 1);
+ $right: nth($margin, 2);
+ $bottom: nth($margin, 3);
+ $left: nth($margin, 2);
+ } @else if length($margin) == 4 {
+ $top: nth($margin, 1);
+ $right: nth($margin, 2);
+ $bottom: nth($margin, 3);
+ $left: nth($margin, 4);
+ }
+
+ [class*="margin-top"] > tbody > [class*="firstrow"] > td {
+ padding-top: $top;
+ }
+
+ [class*="margin-bottom"] > tbody > [class*="lastrow"] > td {
+ padding-bottom: $bottom;
+ }
+
+ [class*="margin-left"] > tbody > [class*="row"] > [class*="captioncell"] {
padding-left: $left;
}
- .#{$primary-stylename}-margin-right > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell {
+ [class*="margin-right"] > tbody > [class*="row"] > [class*="contentcell"] {
padding-right: $right;
}
}
-@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}-contentcell,
- > .#{$primary-stylename}-errorcell {
- padding-top: $vertical;
- }
+/**
+ * Outputs the styles for form layout spacing.
+ *
+ * @param {size} $vertical ($v-layout-spacing-vertical) - The vertical spacing between the rows in the form layout
+ *
+ * @group formlayout
+ */
+@mixin valo-formlayout-spacing ($vertical: $v-layout-spacing-vertical) {
+ [class*="spacing"] > tbody > [class*="row"] > td {
+ padding-top: $vertical;
}
-}
-
-
+ [class*="spacing"] > tbody > [class*="firstrow"] > td {
+ padding-top: 0;
+ }
+}
-@mixin valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) {
+/**
+ * Outputs the styles for a light style form layout. This mixin expects the target to have the normal styles of a form layout applied.
+ *
+ * @param {size} $row-height ($v-unit-size) - The height of an individual form layout row
+ *
+ * @group formlayout
+ */
+@mixin valo-formlayout-light-style ($row-height: $v-unit-size) {
> table {
padding: 0;
}
- > table > tbody > .#{$primary-stylename}-row {
- > .#{$primary-stylename}-captioncell,
- > .#{$primary-stylename}-contentcell,
- > .#{$primary-stylename}-errorcell {
- padding-top: 0;
- height: $row-height; // Effectively min-height
- }
- }
-
- > table > tbody > .#{$primary-stylename}-row td {
+ > table > tbody > [class*="row"] > td {
+ padding-top: 0;
+ height: $row-height; // Effectively min-height
border-bottom: valo-border($color: $v-app-background-color, $strength: 0.3);
}
- > table > tbody > .#{$primary-stylename}-lastrow td {
+ > table > tbody > [class*="lastrow"] > td {
border-bottom: none;
}
- > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell {
+ > table > tbody > [class*="row"] > [class*="captioncell"] {
color: valo-font-color($v-background-color, .5);
text-align: right;
padding-left: ceil($v-unit-size/3);
line-height: $row-height;
}
- .#{$primary-stylename}-contentcell {
+ > table > tbody > [class*="row"] > [class*="contentcell"] {
> .v-textfield,
> .v-textarea,
> .v-filterselect,
> .v-richtextarea {
height: auto;
}
+
+ > .v-label-h2,
+ > .v-label-h3,
+ > .v-label-h4 {
+ border-bottom: none;
+ }
+
+ > .v-label-h3,
+ > .v-label-h4 {
+ margin-top: 0;
+ }
}
.v-richtextarea {
.v-checkbox {
margin-left: ceil($v-unit-size/6);
}
-
- > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell {
- > .v-label-h2,
- > .v-label-h3,
- > .v-label-h4 {
- border-bottom: none;
- }
-
- > .v-label-h3,
- > .v-label-h4 {
- margin-top: 0;
- }
- }
}
-$v-font-weight--header: $v-font-weight - 100 !default;
-$v-line-height--header: 1.1 !default;
-$v-font-family--header: null !default;
-$v-font-color--colored: $v-selection-color !default;
-
-$v-font-size--h1: 2.4em !default;
-$v-font-size--h2: 1.6em !default;
-$v-font-size--h3: 1.2em !default;
-$v-font-size--large: 1.2em !default;
-$v-font-size--small: 0.87em !default;
-
-$v-font-family--h1: $v-font-family--header !default;
-$v-font-family--h2: $v-font-family--header !default;
-$v-font-family--h3: $v-font-family--header !default;
-
-$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 !default;
-
-
+/**
+ * The font weight for headers.
+ *
+ * @group label
+ */
+$v-font-weight--header: $v-font-weight - 100 !default;
+
+/**
+ * The line height for headers.
+ *
+ * @group label
+ */
+$v-line-height--header: 1.1 !default;
+
+/**
+ * The font family for headers.
+ *
+ * @group label
+ */
+$v-font-family--header: null !default;
+
+/**
+ * The font color for colored style labels.
+ *
+ * @group label
+ */
+$v-font-color--colored: $v-selection-color !default;
+
+/**
+ * The font size for 1st level headers.
+ *
+ * @group label
+ */
+$v-font-size--h1: 2.4em !default;
+
+/**
+ * The font size for 2nd level headers.
+ *
+ * @group label
+ */
+$v-font-size--h2: 1.6em !default;
+
+/**
+ * The font size for 3rd level headers.
+ *
+ * @group label
+ */
+$v-font-size--h3: 1.2em !default;
+
+/**
+ * The font family for 1st level headers.
+ *
+ * @group label
+ */
+$v-font-family--h1: $v-font-family--header !default;
+
+/**
+ * The font family for 2nd level headers.
+ *
+ * @group label
+ */
+$v-font-family--h2: $v-font-family--header !default;
+
+/**
+ * The font family for 3rd level headers.
+ *
+ * @group label
+ */
+$v-font-family--h3: $v-font-family--header !default;
+
+/**
+ * The letter spacing for 1st level headers.
+ *
+ * @group label
+ */
+$v-letter-spacing--h1: -0.03em !default;
+
+/**
+ * The letter spacing for 2nd level headers.
+ *
+ * @group label
+ */
+$v-letter-spacing--h2: -0.02em !default;
+
+/**
+ * The letter spacing for 3rd level headers.
+ *
+ * @group label
+ */
+$v-letter-spacing--h3: 0 !default;
+
+/**
+ * The letter spacing for 4th level headers.
+ *
+ * @group label
+ */
+$v-letter-spacing--h4: 0 !default;
+
+
+/**
+ * Outputs the selectors and styles for the Label component.
+ *
+ * @param {string} $primary-stylename (v-label) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group label
+ */
@mixin valo-label ($primary-stylename: v-label, $include-additional-styles: contains($v-included-additional-styles, label)) {
.#{$primary-stylename} {
+/**
+ * Should the tabsheet content changes be animated.
+ *
+ * @group tabsheet
+ */
$v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
-
-
+/**
+ * Outputs the global selectors and properties for the TabSheet component - styles which are
+ * considered mandatory for the component to work properly.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - the primary style name for the selectors
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-global ($primary-stylename: v-tabsheet) {
.#{$primary-stylename}-hidetabs > .#{$primary-stylename}-tabcontainer,
.#{$primary-stylename}-spacertd,
}
-
-
-
+/**
+ * Outputs the selectors and properties for the TabSheet component.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet ($primary-stylename: v-tabsheet, $include-additional-styles: contains($v-included-additional-styles, tabsheet)) {
.#{$primary-stylename} {
&:not(.v-has-width) {
}
+/**
+ * Outputs the styles for the tabcontainer element of a tabsheet.
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-tabcontainer-style ($primary-stylename: v-tabsheet) {
position: relative;
@include box-sizing(border-box);
}
+/**
+ * Outputs the styles for the tabitemcell element of a tabsheet.
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-tabitemcell-style ($primary-stylename: v-tabsheet) {
vertical-align: bottom;
}
+/**
+ * Outputs the styles for the tab scroller element of a tabsheet.
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-scroller-style ($primary-stylename: v-tabsheet) {
$border-color: first-color(valo-border($strength: 0.5));
}
+/**
+ * Outputs the font icon styles for the previous button element of a tabsheet scroller.
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-scroller-prev-icon-style {
font-family: FontAwesome;
content: "\f053";
}
+/**
+ * Outputs the font icon styles for the next button element of a tabsheet scroller.
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-scroller-next-icon-style {
font-family: FontAwesome;
content: "\f054";
}
-
-
-
-
-
-
+/**
+ * Outputs the styles for the framed tabsheet style.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {bool} $frame-inactive-tabs (true) - Should inactive tabs be framed as well (the active tab is always framed with this style)
+ * @param {bool} $outer-frame (true) - Should the frame contain the whole tabsheet (i.e. tabbar and tab content). If false, works like a "borderless" style.
+ * @param {size} $tab-spacing ($v-unit-size/10) - The spacing between tabs
+ *
+ * @group 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 {
}
-
-
-
-
-
-
-
+/**
+ * Outputs the styles for a tabsheet where the tabs are aligned to the position specified by the parameter in the tabbar.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {string} $align (center) - The alignment of the tabs inside the tabbar. Possible values: left, right, center.
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-align-tabs-style ($primary-stylename: v-tabsheet, $align: center) {
> .#{$primary-stylename}-tabcontainer {
text-align: $align;
}
}
+
+/**
+ * Outputs the styles for a tabsheet where all tabs in the tabbar have equal width and span the entire width of the tabbar.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {bool} $flex (false) - Should the size of the tabs be proportional to their content, i.e. should the available space in the tabbar be distributed to the tabs in relation to their content sizes.
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-equal-width-tabs-style ($primary-stylename: v-tabsheet, $flex: false) {
> .#{$primary-stylename}-tabcontainer {
table,
}
}
+
+/**
+ * Outputs the styles for a tabsheet where the icons of individual tabs are on top of the tab captions.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-icons-on-top-style ($primary-stylename: v-tabsheet) {
> div > .#{$primary-stylename}-tabs {
.v-caption {
}
+/**
+ * Outputs the styles for a tabsheet where only the selected tab has the close button visible.
+ * Note that the other tabs can still be closed programmatically.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-only-selected-closable-style ($primary-stylename: v-tabsheet) {
> .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-caption-close {
visibility: hidden;
}
+/**
+ * Outputs the styles for a tabsheet where the tabbar has increased padding to separate the tabs
+ * inside it from their surrounding container.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ *
+ * @group tabsheet
+ */
@mixin valo-tabsheet-padded-tabbar-style ($primary-stylename: v-tabsheet) {
> .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabs {
padding: 0 round($v-unit-size/4);
+/**
+ * Outputs the selectors and properties for the TextArea component.
+ *
+ * @param {string} $primary-stylename (v-textarea) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group textarea
+ */
@mixin valo-textarea ($primary-stylename: v-textarea, $include-additional-styles: contains($v-included-additional-styles, textarea)) {
.#{$primary-stylename} {
}
+/**
+ * Outputs the styles for a text area variant.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the text area, which corresponds its height
+ * @param {size | list} $padding (null) - The padding of the text area. Computed from other parameters by default.
+ * @param {color} $font-color (null) - The font color of the text area. Computed from the $background-color by default.
+ * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text area
+ * @param {size} $font-size (null) - The font size of the text area. Inherited from the parent by default.
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the text area
+ * @param {list} $border ($v-textfield-border) - The border of the text area
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the text area
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal focus disabled) - The text area states for which to output corresponding styles
+ *
+ * @group textfield
+ */
@mixin valo-textarea-style (
$unit-size : $v-unit-size,
- $padding : round($v-unit-size/6), // Computed by default
+ $padding : round($v-unit-size/6),
- $font-color : null, // Computed by default
- $font-weight : max(400, $v-font-weight), // Inherited by default
- $font-size : null, // Inherited by default
+ $font-color : null,
+ $font-weight : max(400, $v-font-weight),
+ $font-size : null,
$background-color : $v-textfield-background-color,
$border : $v-textfield-border,
@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
+ $font-weight: $font-weight,
+ $font-size: $font-size,
$background-color: $background-color,
$border: $border,
+/**
+ * The background color for text fields.
+ * @group textfield
+ */
$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;
+
+/**
+ * The background color for read-only text fields.
+ * @group textfield
+ */
$v-textfield-background-color--readonly: darkest-color($v-app-background-color, darken($v-textfield-background-color, 2%));
+
+/**
+ * The bevel style for text fields. See the documentation for $v-bevel.
+ * @group textfield
+ */
$v-textfield-bevel: inset 0 1px 0 v-shade !default;
+
+/**
+ * The shadow style for text fields. See the documentation for $v-shadow.
+ * @group textfield
+ */
$v-textfield-shadow: 0 1px 0 (v-tint 2) !default;
+
+/**
+ * The font-weight for text fields.
+ * @group textfield
+ */
$v-textfield-font-weight: 400 !default;
+
+/**
+ * The border style for text fields. See the documentation for $v-border.
+ * @group textfield
+ */
$v-textfield-border: $v-border !default;
+
+/**
+ * The border-radius for text fields. See the documentation for $v-border-radius;
+ * @group textfield
+ */
$v-textfield-border-radius: $v-border-radius !default;
-$v-textfield-disabled-opacity: $v-disabled-opacity !default;
+/**
+ * The opacity for disabled text fields.
+ * @group textfield
+ */
+$v-textfield-disabled-opacity: $v-disabled-opacity !default;
+/**
+ * Outputs the selectors and properties for the TextField component.
+ *
+ * @param {string} $primary-stylename (v-textfield) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group textfield
+ */
@mixin valo-textfield ($primary-stylename: v-textfield, $include-additional-styles: contains($v-included-additional-styles, textfield)) {
.#{$primary-stylename} {
}
-
+/**
+ * Outputs the styles for a text field variant.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the text field, which corresponds its height
+ * @param {size | list} $padding (null) - The padding of the text field. Computed from other parameters by default.
+ * @param {color} $font-color (null) - The font color of the text field. Computed from the $background-color by default.
+ * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text field
+ * @param {size} $font-size (null) - The font size of the text field. Inherited from the parent by default.
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
+ * @param {list} $border ($v-textfield-border) - The border of the text field
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the text field
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal focus disabled) - The text field states for which to output corresponding styles
+ *
+ * @group textfield
+ */
@mixin valo-textfield-style (
$unit-size : $v-unit-size,
- $padding : null, // Computed by default
+ $padding : null,
- $font-color : null, // Computed by default
+ $font-color : null,
$font-weight : max(400, $v-font-weight),
- $font-size : null, // Inherited by default
+ $font-size : null,
$background-color : $v-textfield-background-color,
$border : $v-textfield-border,
}
+/**
+ * Outputs the styles for a text field input prompt.
+ *
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
+ *
+ * @group textfield
+ */
@mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) {
@if $background-color == transparent {
color: inherit;
}
+/**
+ * Outputs the styles for a text field focus state.
+ *
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
+ * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient.
+ *
+ * @group textfield
+ */
@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 {
}
+/**
+ * Outputs the styles for a read-only text field.
+ *
+ * @group textfield
+ */
@mixin valo-textfield-readonly-style {
background: $v-textfield-background-color--readonly;
color: valo-font-color($v-textfield-background-color--readonly);
}
-
+/**
+ * Outputs the styles for a borderless style text field.
+ *
+ * @param {color} $background-color (transparent) - The background color of the text field
+ *
+ * @group textfield
+ */
@mixin valo-textfield-borderless-style ($background-color: transparent) {
border: none;
border-radius: 0;
}
-
-
+/**
+ * Outputs the styles for a text field error state.
+ *
+ * @group textfield
+ */
@mixin valo-textfield-error-style {
border-color: $v-error-indicator-color !important;
$bg: scale-color($v-error-indicator-color, $lightness: 98%);
}
-
-
-
-
-
+/**
+ * Outputs the selectors and styles for an inline-icon style for a text field. Included indipendently (i.e. not enclosed with a parent text field selector).
+ *
+ * @param {string} $primary-stylename (v-textfield) - The primary style name for the selectors
+ * @param {string | list} $stylenames (inline-icon) - The additional style names which will define the inline-icon style
+ * @param {string} $input-selector (null) - Additional selector for a nested input element which should be targeted
+ * @param {size} $unit-size ($v-unit-size) - The unit size which the resulting style will support
+ * @param {size} $font-size ($v-font-size) - The font size which the resulting style will support (needed for font icons)
+ * @param {size} $image-icon-size (16px) - The image icon height which the resulting style will support (needed to center the icon vertically inside the text field)
+ *
+ * @group text field
+ */
@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: "";
@include valo-panel-adjust-content-margins;
> .v-formlayout {
- @include valo-formlayout-margins($all: round($v-unit-size/3));
+ @include valo-formlayout-margin(round($v-unit-size/3));
}
position: relative;
projects / vaadin-framework.git / commitdiff