123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584 |
- /**
- * 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;
- white-space: nowrap;
-
- .v-icon {
- position: absolute;
- pointer-events: none;
- }
-
- .v-icon.FontAwesome {
- margin-left: 0px;
- }
- }
-
- .#{$primary-stylename}-error {
- .#{$primary-stylename}-input {
- @include valo-textfield-error-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-color;
- border-color: $v-error-indicator-color;
- }
- }
-
- .#{$primary-stylename}-error-info {
- .#{$primary-stylename}-input {
- @include valo-textfield-error-level-info-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-info-color;
- border-color: $v-error-indicator-level-info-color;
- }
- }
-
- .#{$primary-stylename}-error-warning {
- .#{$primary-stylename}-input {
- @include valo-textfield-error-level-warning-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-warning-color;
- border-color: $v-error-indicator-level-warning-color;
- }
- }
-
- .#{$primary-stylename}-error-error {
- .#{$primary-stylename}-input {
- @include valo-textfield-error-level-error-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-error-color;
- border-color: $v-error-indicator-level-error-color;
- }
- }
-
- .#{$primary-stylename}-error-critical {
- .#{$primary-stylename}-input {
- @include valo-textfield-error-level-critical-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-critical-color;
- border-color: $v-error-indicator-level-critical-color;
- }
- }
-
- .#{$primary-stylename}-error-system {
- .#{$primary-stylename}-input {
- @include valo-textfield-error-level-system-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-system-color;
- border-color: $v-error-indicator-level-system-color;
- }
- }
-
- .#{$primary-stylename}-suggestpopup {
- @include valo-combobox-popup-style;
- }
-
- .#{$primary-stylename}-no-input {
- @include valo-combobox-no-input-style;
- }
-
-
- @if $include-additional-styles {
- .#{$primary-stylename}-borderless {
- .#{$primary-stylename}-input {
- @include valo-textfield-borderless-style;
- }
- .#{$primary-stylename}-button {
- border: none;
- color: inherit;
- @include opacity(.5);
- }
- &.#{$primary-stylename}-prompt .#{$primary-stylename}-input {
- @include valo-textfield-prompt-style(transparent);
- }
- }
-
- .#{$primary-stylename}-align-right input {
- text-align: right;
- }
-
- .#{$primary-stylename}-align-center input {
- text-align: center;
- }
-
- .#{$primary-stylename}-tiny {
- @include valo-combobox-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
- font-size: $v-font-size--tiny;
- }
-
- .#{$primary-stylename}-compact,
- .#{$primary-stylename}-small {
- @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
- }
-
- .#{$primary-stylename}-small {
- font-size: $v-font-size--small;
- }
-
- .#{$primary-stylename}-large {
- @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
- font-size: $v-font-size--large;
- }
-
- .#{$primary-stylename}-huge {
- @include valo-combobox-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
- font-size: $v-font-size--huge;
- }
- }
- }
-
-
- /**
- * 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,
- $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
- ) {
-
- height: $unit-size;
- border-radius: $border-radius;
-
- [class*="input"] {
- @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,
- $states: $states);
- }
-
- .v-icon + [class*="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;
- }
-
- span.v-icon {
- color: valo-font-color($background-color);
- width: $unit-size;
- line-height: 1;
- padding-top: .12em;
-
- $padding-width: ceil($unit-size/6);
- @if $border-radius {
- $padding-width: $padding-width + ceil($border-radius/3);
- }
- margin-left: $padding-width;
- }
-
- &[class*="prompt"] > [class*="input"] {
- @include valo-textfield-prompt-style($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);
- & [class$="button"] {
- cursor: default;
- pointer-events: none;
- &:active:after {
- display: none;
- }
- }
- }
-
- &.v-readonly {
- [class*="input"] {
- @include valo-textfield-readonly-style;
- }
-
- [class$="button"] {
- cursor: default;
- pointer-events: none;
- &:active:after {
- display: none;
- }
- }
- }
- }
-
-
- /**
- * 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,
-
- $font-color: null,
- $font-weight: null,
- $font-size: null,
-
- $background-color: $v-textfield-background-color,
- $border: $v-textfield-border,
- $border-radius: $v-textfield-border-radius,
-
- $gradient: none,
- $bevel: $v-bevel,
- $shadow: $v-shadow,
-
- $states: normal focus disabled
- ) {
- box-sizing: border-box;
- @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,
- $states: $states);
- width: 100% !important; // Need to override calculated inline style which is sometimes added
- height: 100%;
- padding-right: round($unit-size * 1) + 1;
- border-radius: inherit;
- }
-
-
- /**
- * 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($border) or 0;
- @include valo-tappable;
- position: absolute;
- width: $unit-size;
-
- @if $border and $border != none {
- top: $border-width;
- right: $border-width;
- bottom: $border-width;
- }
-
- @if type-of($background-color) == color {
- @if $border {
- border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
- }
- color: mix($background-color, valo-font-color($background-color));
-
- }
-
- @if $v-border-radius > 0 {
- $br: $v-border-radius - $border-width;
- border-radius: 0 $br $br 0;
- }
-
- &:before {
- @include valo-combobox-button-icon-style;
-
- @if $v-animations-enabled {
- @include transition(color 140ms);
- }
- position: absolute;
- width: $unit-size;
- text-align: center;
- top: 50%;
- line-height: 1;
- margin-top: -.47em;
- }
-
- @if $v-hover-styles-enabled and type-of($background-color) == color {
- &:hover:before {
- color: valo-font-color($background-color);
- }
- }
-
- &:active:after {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- border-radius: inherit;
- @if type-of($background-color) == color {
- @include valo-button-active-style($background-color);
- }
- }
- }
-
-
- /**
- * Outputs the font icon styles for the combobox drop down button.
- *
- * @group combobox
- */
- @mixin valo-combobox-button-icon-style {
- font-family: ThemeIcons;
- content: "\f078";
- }
-
-
- /**
- * Outputs the styles for a combobox popup.
- *
- * @group combobox
- */
- @mixin valo-combobox-popup-style {
-
- @if $v-animations-enabled {
- @if $v-overlay-animate-in {
- &[class*="animate-in"] {
- @include animation($v-overlay-animate-in);
- }
- }
- // No animate-out since that will currently prevent the dropdown from
- // closing when the user selects an item
- }
-
- [class$="suggestmenu"] {
- @include valo-selection-overlay-style($animate-in: false, $animate-out: false);
- box-sizing: content-box;
- position: relative;
- z-index: 1;
- display: block;
- }
-
- margin-top: ceil($v-unit-size/8) !important;
-
- table, tbody, tr, td {
- display: block;
- width: 100%;
- overflow-y: hidden;
-
- // float & clear needs to be set so that IE 8 & 9 displays the elements as block
- float: left;
- clear: both;
- }
-
- .gwt-MenuItem {
- @include valo-selection-item-style;
- height: $v-selection-item-height;
- box-sizing: border-box;
- text-overflow: ellipsis;
- overflow-x: hidden;
- }
-
- .gwt-MenuItem-selected {
- @include valo-selection-item-selected-style;
- }
-
- [class$="status"] {
- position: absolute;
- right: $v-border-radius;
- $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;
- height: ceil($v-unit-size*0.6);
- bottom: -(ceil($v-unit-size*0.6));
- font-size: ceil($v-font-size*0.73);
- line-height: ceil($v-unit-size*0.6);
- padding: 0 ceil($v-unit-size/7);
- cursor: default;
- pointer-events: none;
-
- @if $v-animations-enabled {
- @include animation(valo-animate-in-slide-down 200ms 80ms backwards);
- }
-
- > * {
- color: valo-font-color($bg);
- text-decoration: none;
- }
- }
-
- div[class*="page"] {
- position: absolute;
- z-index: 3;
- right: 0;
- @include opacity(.2);
- cursor: pointer;
- @include transition( all 200ms );
- width: ceil($v-unit-size/1.5);
- height: ceil($v-unit-size/1.5);
- line-height: ceil($v-unit-size/1.5);
- text-align: center;
- font-family: ThemeIcons;
- @include transform( scale(.8) );
-
- color: valo-font-color($v-background-color);
-
- &:after {
- // Extend click target when hovering over (popup width might change between pages)
- content: "";
- position: absolute;
- display: block;
- border-radius: 50%;
- }
-
- &:hover {
- @include opacity(1);
- background: rgba($v-background-color, .5);
-
- &:after {
- top: -10px;
- bottom: -10px;
- left: -20px;
- right: -20px;
- }
- }
-
- 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;
- }
- }
-
- /**
- *
- *
- *
- * @group combobox
- */
- @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;
- }
- }
|