123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456 |
- /**
- * 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%)) !default;
-
- /**
- * The bevel style for text fields. See the documentation for $v-bevel.
- * @group textfield
- */
- $v-textfield-bevel: if($v-bevel and ($v-bevel != none), inset 0 1px 0 v-shade, $v-bevel) !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;
-
- /**
- * 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} {
- @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;
- }
-
- .#{$primary-stylename}-error-info {
- @include valo-textfield-error-level-info-style;
- }
-
- .#{$primary-stylename}-error-warning {
- @include valo-textfield-error-level-warning-style;
- }
-
- .#{$primary-stylename}-error-error {
- @include valo-textfield-error-level-error-style;
- }
-
- .#{$primary-stylename}-error-critical {
- @include valo-textfield-error-level-critical-style;
- }
-
- .#{$primary-stylename}-error-system {
- @include valo-textfield-error-level-system-style;
- }
-
- @if $include-additional-styles {
- .#{$primary-stylename}-borderless {
- @include valo-textfield-borderless-style;
- }
-
- .#{$primary-stylename}-tiny {
- @include valo-textfield-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
- font-size: $v-font-size--tiny;
- }
-
- .#{$primary-stylename}-compact,
- .#{$primary-stylename}-small {
- @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
- }
-
- .#{$primary-stylename}-small {
- font-size: $v-font-size--small;
- }
-
- .#{$primary-stylename}-large {
- @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
- font-size: $v-font-size--large;
- }
-
- .#{$primary-stylename}-huge {
- @include valo-textfield-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
- font-size: $v-font-size--huge;
- }
-
- @include valo-textfield-inline-icon($primary-stylename: $primary-stylename, $stylenames: inline-icon);
- @include valo-textfield-inline-icon($primary-stylename: $primary-stylename, $stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny);
- @include valo-textfield-inline-icon($primary-stylename: $primary-stylename, $stylenames: inline-icon compact, $unit-size: $v-unit-size--small);
- @include valo-textfield-inline-icon($primary-stylename: $primary-stylename, $stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
- @include valo-textfield-inline-icon($primary-stylename: $primary-stylename, $stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
- @include valo-textfield-inline-icon($primary-stylename: $primary-stylename, $stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge);
-
- .#{$primary-stylename}-align-right {
- text-align: right;
- }
-
- .#{$primary-stylename}-align-center {
- text-align: center;
- }
- }
-
- }
-
-
- /**
- * 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,
-
- $font-color : null,
- $font-weight : max(400, $v-font-weight),
- $font-size : null,
-
- $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)
- ) {
-
- @if contains($states, normal) {
- @include appearance(none);
- @include user-select(text);
- 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);
- padding: $padding-height $padding-width;
- }
-
- @if $background-color and $border {
- border: valo-border($border, darkest-color($background-color, $v-app-background-color));
- }
-
- @if $gradient == none {
- background: $background-color;
- } @else if $gradient {
- @include valo-gradient($color: $background-color, $gradient: $gradient)
- }
-
- @if $background-color {
- color: valo-font-color($background-color);
- }
-
- @include 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 contains($states, disabled) {
- &.v-disabled {
- @include opacity($v-textfield-disabled-opacity);
- }
- }
-
- @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
- &[class*="prompt"] {
- @include valo-textfield-prompt-style($background-color);
- }
-
- }
-
-
- /**
- * 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;
- @include opacity(.5);
- } @else 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;
- }
- }
-
-
- /**
- * 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 {
- @include transition(none);
- }
-
- $focus-color: $v-focus-color;
-
- @if color-luminance($focus-color) + 50 < color-luminance($v-background-color) {
- border-color: $focus-color;
- }
-
- @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient, $include-focus: true));
-
- @include valo-focus-style;
- }
-
-
- /**
- * 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);
- @include box-shadow(none);
- &:focus {
- box-shadow: none;
- border-color: first-color(valo-border($v-textfield-border, $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;
- background: $background-color;
- @include box-shadow(none);
-
- $font-color: inherit;
- @if $background-color != transparent and type-of($background-color) == color {
- $font-color: valo-font-color($background-color);
- }
- color: $font-color;
-
- &:focus {
- @include box-shadow(none);
- }
-
- &[class*="prompt"] {
- @include valo-textfield-prompt-style($background-color);
- }
- }
-
-
- /**
- * Outputs the styles for a text field error state.
- *
- * @group textfield
- */
- @mixin valo-textfield-error-style($indicator-color: $v-error-indicator-color) {
- border-color: $indicator-color !important;
- $bg: scale-color($indicator-color, $lightness: 98%);
- background: $bg;
- color: valo-font-color($bg);
- }
-
- /**
- * Outputs the styles for a text field error state with error level 'info'.
- *
- * @group textfield
- */
- @mixin valo-textfield-error-level-info-style {
- @include valo-textfield-error-style($v-error-indicator-level-info-color);
- }
-
- /**
- * Outputs the styles for a text field error state with error level 'warning'.
- *
- * @group textfield
- */
- @mixin valo-textfield-error-level-warning-style {
- @include valo-textfield-error-style($v-error-indicator-level-warning-color);
- }
-
- /**
- * Outputs the styles for a text field error state with error level 'error'.
- *
- * @group textfield
- */
- @mixin valo-textfield-error-level-error-style {
- @include valo-textfield-error-style($v-error-indicator-level-error-color);
- }
-
- /**
- * Outputs the styles for a text field error state with error level 'critical'.
- *
- * @group textfield
- */
- @mixin valo-textfield-error-level-critical-style {
- @include valo-textfield-error-style($v-error-indicator-level-critical-color);
- }
-
- /**
- * Outputs the styles for a text field error state with error level 'system'.
- *
- * @group textfield
- */
- @mixin valo-textfield-error-level-system-style {
- @include valo-textfield-error-style($v-error-indicator-level-system-color);
- }
-
-
- /**
- * 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: "";
- $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;
- }
-
- #{$caption-selector} {
- padding: 0;
-
- .v-captiontext {
- // Need to include to get the default padding back
- @include valo-caption-style;
- margin: 0;
- }
-
- .v-icon {
- position: absolute;
- z-index: 10;
- }
-
- // Font icons
- span.v-icon {
- $border-width: first-number($v-textfield-border);
- left: $border-width;
- bottom: $border-width;
- width: $unit-size;
- line-height: $unit-size - $border-width*2;
- text-align: center;
- font-size: $font-size;
- }
-
- // Image icons
- img.v-icon {
- left: round(($unit-size - $image-icon-size)/2);
- bottom: round(($unit-size - $image-icon-size)/2);
- }
- }
-
- #{$text-input-selector} #{$input-selector} {
- padding-left: $unit-size;
- }
- }
|