penpot/frontend/src/app/main/ui/ds/buttons/icon_button.scss

57 lines
1.3 KiB
SCSS

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "../typography.scss" as *;
@use "../_sizes.scss" as *;
@use "./buttons" as *;
.icon-button {
@extend %base-button;
--button-width: #{$sz-32};
--button-height: #{$sz-32};
display: grid;
place-content: center;
}
.icon-button-primary {
@extend %base-button-primary;
}
.icon-button-secondary {
@extend %base-button-secondary;
}
.icon-button-ghost {
@extend %base-button-ghost;
}
.icon-button-destructive {
@extend %base-button-destructive;
}
.icon-button-action {
--button-bg-color: transparent;
--button-fg-color: var(--color-foreground-secondary);
--button-hover-bg-color: transparent;
--button-hover-fg-color: var(--color-accent-primary);
--button-active-bg-color: var(--color-background-quaternary);
--button-disabled-bg-color: transparent;
--button-disabled-fg-color: var(--color-accent-primary-muted);
--button-focus-bg-color: transparent;
--button-focus-fg-color: var(--color-accent-primary);
--button-focus-inner-ring-color: transparent;
--button-focus-outer-ring-color: var(--color-accent-primary);
--button-width: #{$sz-24};
--button-height: #{$sz-24};
}