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

Styles for Cumulocity IoT applications

@btn-font-weight:                      var(--c8y-btn-font-weight);
@btn-font-size-base:                   var(--c8y-btn-font-size-base);
@btn-font-size-large:                  var(--c8y-btn-font-size-large);
@btn-font-size-small:                  var(--c8y-btn-font-size-small);
@btn-font-size-xs:                     var(--c8y-btn-font-size-xs);
@btn-line-height-base:                 var(--c8y-btn-line-height-base);
@btn-line-height-large:                var(--c8y-btn-line-height-large);
@btn-line-height-small:                var(--c8y-btn-line-height-small);
@btn-line-height-xs:                   var(--c8y-btn-line-height-xs);
@btn-padding-vertical:                 var(--c8y-btn-padding-base-vertical);
@btn-padding-horizontal:               var(--c8y-btn-padding-base-horizontal);
@btn-padding-large-vertical:           var(--c8y-btn-padding-large-vertical);
@btn-padding-large-horizontal:         var(--c8y-btn-padding-large-horizontal);
@btn-padding-small-vertical:           var(--c8y-btn-padding-small-vertical);
@btn-padding-small-horizontal:         var(--c8y-btn-padding-small-horizontal);
@btn-padding-xs-vertical:              var(--c8y-btn-padding-xs-vertical);
@btn-padding-xs-horizontal:            var(--c8y-btn-padding-xs-horizontal);
@btn-padding-icon-horizontal:          var(--c8y-btn-padding-icon-horizontal);
@btn-padding-icon-vertical:            var(--c8y-btn-padding-icon-vertical);

@btn-border-radius-base:               calc( var(--btn-border-radius-base, var(--c8y-btn-border-radius-base)) * 1px );
@btn-border-radius-large:              var(--c8y-btn-border-radius-large);
@btn-border-radius-small:              var(--c8y-btn-border-radius-small);
@btn-border-radius-xs:                 var(--c8y-btn-border-radius-xs);
@btn-border-radius-pill:               var(--c8y-btn-border-radius-pill);
@btn-group-border-radius:              var(--c8y-btn-group-border-radius);

@btn-shadow:                           var(--c8y-btn-shadow-default);
@btn-transition:                       var(--c8y-btn-transition-default);

// Switch
@switch-width:                         60px;
@switch-height:                        30px;
@switch-radius:                        30px;
@switch-sm:                            20px;
@padding-btn-xs-horizontal:            12px;
@padding-btn-small-horizontal:         14px;

// Colors
@btn-default-color-default:                           var(--c8y-btn-default-color-default);
@btn-default-background-default:                      var(--c8y-btn-default-background-default);
@btn-default-border-color-default:                    var(--c8y-btn-default-border-color-default);

@btn-default-color-hover:                             var(--c8y-btn-default-color-hover);
@btn-default-background-hover:                        var(--c8y-btn-default-background-hover);
@btn-default-border-color-hover:                      var(--c8y-btn-default-border-color-hover);

@btn-default-color-focus:                             var(--c8y-btn-default-color-focus);
@btn-default-background-focus:                        var(--c8y-btn-default-background-focus);
@btn-default-border-color-focus:                      var(--c8y-btn-default-border-color-focus);

@btn-default-color-active:                            var(--c8y-btn-default-color-active);
@btn-default-background-active:                       var(--c8y-btn-default-background-active);
@btn-default-border-color-active:                     var(--c8y-btn-default-border-color-active);

@btn-primary-color-default:                           var(--c8y-btn-primary-color-default);
@btn-primary-background-default:                      var(--c8y-btn-primary-background-default);
@btn-primary-border-color-default:                    var(--c8y-btn-primary-border-color-default);

@btn-primary-color-hover:                             var(--c8y-btn-primary-color-hover);
@btn-primary-background-hover:                        var(--c8y-btn-primary-background-hover);
@btn-primary-border-color-hover:                      var(--c8y-btn-primary-border-color-hover);

@btn-primary-color-focus:                             var(--c8y-btn-primary-color-focus);
@btn-primary-background-focus:                        var(--c8y-btn-primary-background-focus);
@btn-primary-border-color-focus:                      var(--c8y-btn-primary-border-color-focus);

@btn-primary-color-active:                            var(--c8y-btn-primary-color-active);
@btn-primary-background-active:                       var(--c8y-btn-primary-background-active);
@btn-primary-border-color-active:                     var(--c8y-btn-primary-border-color-active);

@btn-accent-color-default:                            var(--c8y-btn-accent-color-default);
@btn-accent-background-default:                       var(--c8y-btn-accent-background-default);
@btn-accent-border-color-default:                     var(--c8y-btn-accent-border-color-default);

@btn-accent-color-hover:                             var(--c8y-btn-accent-color-hover);
@btn-accent-background-hover:                        var(--c8y-btn-accent-background-hover);
@btn-accent-border-color-hover:                      var(--c8y-btn-accent-border-color-hover);

@btn-accent-color-focus:                             var(--c8y-btn-accent-color-focus);
@btn-accent-background-focus:                        var(--c8y-btn-accent-background-focus);
@btn-accent-border-color-focus:                      var(--c8y-btn-accent-border-color-focus);

@btn-accent-color-active:                            var(--c8y-btn-accent-color-active);
@btn-accent-background-active:                       var(--c8y-btn-accent-background-active);
@btn-accent-border-color-active:                     var(--c8y-btn-accent-border-color-active);

@btn-link-disabled-color:                             @component-color-disabled;