@progress/kendo-ui/css/web/Default/floatingactionbutton/_theme.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

/*!
 * Copyright 2021 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 // FAB
 .k-fab {
    .box-shadow(@fab-shadow);
}

// Normal state
each( @theme-colors, {
    @name: @key;
    @color: @value;

    .k-fab.k-fab-@{name} {
        border-color: @color;
        color: contrast( @color );
        background-color: @color;
    }
});

// Hover state
each( @theme-colors, {
    @name: @key;
    @color: @value;

    .k-state-hover.k-fab-@{name},
    .k-fab.k-fab-@{name}:hover {
        border-color: darken( @color, 5% );
        background-color: darken( @color, 5% );
    }
});

// Focus state
.k-fab.k-state-focus,
.k-fab:focus {
    .box-shadow(@fab-focus-shadow);
}

// Active state
each( @theme-colors, {
    @name: @key;
    @color: @value;

    .k-state-active.k-fab-@{name},
    .k-state-selected.k-fab-@{name},
    .k-fab-@{name}:active {
        border-color: darken( @color, 10%);
        background-color: darken( @color, 10%);
        box-shadow: @fab-shadow, 0px 3px 4px rgba(@color, .4);
    }
});

// Disabled state
.k-fab.k-state-disabled,
.k-fab:disabled {
    .box-shadow(@fab-disabled-shadow);
    opacity: 1;
}

each( @theme-colors, {
    @name: @key;
    @color: @value;

    .k-state-disabled.k-fab-@{name},
    .k-fab-@{name}:disabled {
        background-color: tint( @color, 50% );
    }
});

// Items
.k-fab-item-text {
    .fill(
        @fab-item-text,
        @fab-item-bg,
        @fab-item-border
    );
    .box-shadow(@fab-item-shadow);
}
.k-fab-item-icon {
    .fill(
        @fab-item-icon-text,
        @fab-item-icon-bg,
        @fab-item-icon-border
    );
    .box-shadow(@fab-item-shadow);
}

// Hover state
.k-fab-item.k-state-hover {
    background-image: none;
    color: inherit;
    background-color: inherit;
    border-color: inherit;
    .box-shadow(none);
}

.k-fab-item.k-state-hover .k-fab-item-icon,
.k-fab-item:hover .k-fab-item-icon {
    border-color: darken( @fab-item-icon-border, 5% );
    background-color: darken( @fab-item-icon-bg, 5% );
}

// Focus state
.k-fab-item:focus .k-fab-item-text,
.k-fab-item:focus .k-fab-item-icon,
.k-fab-item.k-state-focus .k-fab-item-text,
.k-fab-item.k-state-focus .k-fab-item-icon {
    .box-shadow(@fab-item-focus-shadow);
}

// Active state
.k-fab-item.k-state-active .k-fab-item-icon,
.k-fab-item:active .k-fab-item-icon {
    border-color: darken( @fab-item-icon-border, 10%);
    background-color: darken( @fab-item-icon-bg, 10%);
    box-shadow: @fab-shadow, 0px 3px 4px rgba(@fab-item-icon-bg, .4);
}

 // Disabled state
 .k-fab-item.k-state-disabled,
 .k-fab-item:disabled {
    opacity: 1;

    .k-fab-item-text,
    .k-fab-item-icon {
        color: tint( @fab-item-text, 80% );
        background-color: tint( @fab-item-bg, 20% );
        .box-shadow(@fab-item-disabled-shadow);
        opacity: 1;

    }
 }

// Popup
.k-popup.k-fab-popup {
    .box-shadow( none );
}