@c8y/style/variables/_forms-vars.less

Styles for Cumulocity IoT applications

// label
@form-label-text-transform:                 var(--c8y-form-label-text-transform);
@form-label-font-weight:                    var(--c8y-form-label-font-weight);
@form-label-font-size:                      var(--c8y-form-label-font-size);
@form-label-color:                          var(--c8y-form-label-color);

//legend
@form-legend-color:                         var(--c8y-form-legend-color);
@form-legend-text-transform:                var(--c8y-form-legend-text-transform);
@form-legend-font-weight:                   var(--c8y-form-legend-font-weight);
@form-legend-font-size:                     var(--c8y-form-legend-font-size);

/* Form-control */
@form-control-color-default:                var(--c8y-form-control-color-default);
@form-control-background-default:           var(--c8y-form-control-background-default);
@form-control-border-color-default:         var(--c8y-form-control-border-color-default);

@form-control-border-color-focus:           var(--c8y-form-control-border-color-focus);
@form-control-background-focus:             var(--c8y-form-control-background-focus);
@form-control-color-focus:                  var(--c8y-form-control-color-focus);

@form-control-placeholder-color:            var(--c8y-form-control-placeholder-color);
@form-control-placeholder-font-style:       var(--c8y-form-control-placeholder-font-style);

@form-control-disabled-opacity:             var(--c8y-form-control-opacity-disabled);

@form-control-background-disabled:          var(--c8y-form-control-background-disabled);
@form-control-color-disabled:               var(--c8y-form-control-color-disabled);



@form-control-validation-error:             var(--palette-status-danger, var(--c8y-form-validation-color-error));
@form-control-validation-warning:           var(--palette-status-warning, var(--c8y-form-validation-color-warning));
@form-control-validation-success:           var(--palette-status-success, var(--c8y-form-validation-color-success));
@form-control-validation-info:              var(--palette-status-info, var(--c8y-form-validation-color-info));
@form-validation-bottom-margin:             var(--c8y-form-validation-bottom-margin);
@form-control-icon-color:                   var(--c8y-form-control-icon-color);

// Size and spacing
@form-control-padding-base-vertical:        var(--c8y-form-control-padding-base-vertical);
@form-control-padding-base-horizontal:      var(--c8y-form-control-padding-base-horizontal);
@form-control-height-base:                  var(--c8y-form-control-height-base);

@form-control-padding-small-vertical:       calc(@form-control-padding-base-vertical * .75);
@form-control-padding-small-horizontal:     calc(@form-control-padding-base-horizontal * .75);
@form-control-height-sm:                    var(--c8y-form-control-height-sm);
@form-control-height-lg:                    var(--c8y-form-control-height-lg);
@form-control-padding-large-vertical:       calc(@form-control-padding-base-vertical * 1.25);
@form-control-padding-large-horizontal:     calc(@form-control-padding-base-horizontal * 1.25);

//Border
@form-control-border-width:                 var(--c8y-form-control-border-width, 1px);
@form-control-border-radius:                var(--c8y-form-control-border-radius);

// typography
@form-control-font-family:                  var(--font-family-base, var(--c8y-form-control-font-family));
@form-control-font-weight:                  var(--c8y-form-control-font-weight);
@form-control-line-height:                  var(--c8y-form-control-line-height);
@form-control-placeholder-font-style:       var(--c8y-form-control-placeholder-font-style);

// Checkboxes
@checkbox-size:                             @margin-16;
@checkbox-icon-size:                        10px;

//misc
@cursor-disabled:                           not-allowed;

/* Input type="range" */
@thumb-radius:                              24px;
@thumb-height:                              24px;
@thumb-width:                               @thumb-height;
@thumb-border-width:                        0;
@track-width:                               100%;
@track-height:                              8px;
@track-border-width:                        1px;
@track-radius:                              4px;

@track-color:                               @form-control-background-default;
@track-focus-color:                         @form-control-border-color-focus;
@thumb-color:                               @component-background-default;
@thumb-border-color:                        @form-control-border-color-default;
@track-border-color:                        transparent;

// SWITCH
@switch-width:                              var(--c8y-switch-width);
@switch-height:                             var(--c8y-switch-height);
@switch-radius:                             var(--c8y-switch-radius);
@switch-sm:                                 @line-height-computed;
@switch-background-default:                 var(--c8y-switch-background-default);
@switch-background-active:                  var(--c8y-switch-background-active);

// ** input-group addons
@input-group-addon-background-default:      @form-control-border-color-default;
@input-group-addon-border-color:            @form-control-border-color-default;